javascript - How to change style for before/after in Angular? -

i'm trying implement breadcrumbs triangles using before/after in css, shown in tutorial:

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

relevant snippets:

<ul class="breadcrumb">     <li><a href="#">home</a></li> </ul>  .breadcrumb li {     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 directed flow, like:

main_category >> sub_category >> details

this flow starts main_category highlighted , other 2 parts dark, , there's underneath can select from. on select, sub_category becomes highlighted , pops up.

my question how change before/after border colors if they're pseudo-elements? tutorial, think can on main part:

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

but there's no me set ng-style before/after, , triangle colors end unchanged.

if understand question correctly, want know how use angular directive dynamically style before/after pseudo-tags.

instead of using ng-style, use ng-class attach class determine before/after pseudo class 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; }