title: How to change style for before/after in Angular?
body: <p>I'm trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:</p>
  
  <p><a href="http://css-tricks.com/triangle-breadcrumbs/" rel="noreferrer">http://css-tricks.com/triangle-breadcrumbs/</a></p>
  
  <p>Relevant snippets:</p>
  
  <pre><code>&lt;ul class="breadcrumb"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  .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; 
  }
  </code></pre>
  
  <p>However, I'm using it as a directed flow, something like:</p>
  
  <p>Main_Category >> Sub_Category >> Details</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#" ng-style="background: {{color}}"&gt;Home&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>But there's no where for me to set ng-style for before/after, and the triangle colors end up unchanged.</p>