13

I'm trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:

http://css-tricks.com/triangle-breadcrumbs/

Relevant snippets:

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
</ul>

.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 65px;
    background: hsla(34,85%,35%,1); 
    position: relative; 
    display: block;
    float: left;
}

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

However, I'm using it as a directed flow, something like:

Main_Category >> Sub_Category >> Details

This flow starts with Main_Category highlighted and other 2 parts dark, and there's a underneath that you can select from. On select, Sub_Category becomes highlighted and another pops up.

My question is how to change the before/after border colors if they're pseudo-elements? So from the tutorial, I think can do this on the main part:

<li><a href="#" ng-style="background: {{color}}">Home</a></li>

But there's no where for me to set ng-style for before/after, and the triangle colors end up unchanged.

1
  • 3
    I'd like to see an answer that addresses this question directly. It's not always appropriate to use classes. For example, I may have a large number of elements for which I change the background image based on item ID.
    – isherwood
    Feb 20, 2015 at 14:34

3 Answers 3

18

If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.

Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

And in CSS:

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}
1
  • Brilliant, the only minor change was "background: black;" to "border-left-color: black;" Thanks a bunch!
    – WBC
    Jun 30, 2014 at 21:54
0

I would avoid using ng-style in this instance you may find it easier to use ng-class and apply a different class depending, this will allow you to keep all your CSS in a single place rather than overriding within the HTML.

Simply change your code to:

<li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>

Where subCategory should be a boolean, on click you set subCategory and then it will add breadcrumb-color as a class value, you should end up with something like this:

<li><a href="#" class="breadcrumb-color">Home</a></li>

Some sample css, now you can set the before and after as you please:

.breadcrumb-color li a {
    background: red;
}

.breadcrumb-color li a:after { 
    background: red;
}
0

ng-class should work for what you are trying to do.

 <li><a href="#" ng-style="ng-class="{beforeCSS: amIBeforeElement()}"">Home</a></li>

rough code example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.