javascriptjqueryhtmlcssangularjs

How can I change style for before/after in Angular?


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.

How can I 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 nowhere for me to set ng-style for before/after, and the triangle colors end up unchanged.


Solution

  • 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;
    }