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.