How to change style for before/after in Angular?
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;
}
Comments
-
WBC almost 2 years
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.
-
WBC almost 10 yearsBrilliant, the only minor change was "background: black;" to "border-left-color: black;" Thanks a bunch!