How to change style for before / after in Angular?

Question

I am trying to implement breadcrumbs with triangles using before / after in CSS, as shown in this tutorial:

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

Relevant fragments:

<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 use it as a directed flow, something like:

Main_Category → Sub_Category → Details

This stream begins by highlighting Main_Category and the other two parts of a dark color, and at the bottom you can choose. When selected, Sub_Category becomes highlighted and another pops up.

My question is how to change the colors before / after the border if they are pseudo-elements? Therefore, from the textbook, I think you can do this on the main part:

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

But no, where can I set the ng-style for before / after, and the colors of the triangle do not change.

Answer 1

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

Instead of using the ng style, use an ng class to attach a class that determines which one should be used before / after the pseudo class.

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

Answer 2

ng classes should work on what you are trying to do.

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

shortcode example. here is the link: https://docs.angularjs.org/api/ng/directive/ngClass

Answer 3

I would avoid using the ng-style in this example, it might be easier for you to use the ng-class and apply a different class depending on this, this will allow you to save all your CSS in one place, and not override inside the HTML.

Just change your code to:

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

Where the subcategory should be logical, when clicked, you set the subcategory, and then it adds the color picker as the class value, you should get something like this:

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

Some examples of css, now you can install before and after, as you like:

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