How to set the css of the li:before with ng-style

Question

I want to change the width value of the li:before with a variable scope (width).

 <ul>
    <li ng-repeat="step in stepsList" ng-style="{li:before { 'width': width;}"
        ng-class="{true: 'active'}[step.active]">
        <span>{{step.stepName | uppercase}}</span>
    </li>
</ul>

I'm doing this code but it's not working. help please.

ngstyle uses inlinestyle so it is not possible http://stackoverflow.com/questions/14141374/using-css-before-and-after-pseudo-elements-with-inline-css — Arun P Johny, May 20 '15 at 14:25
http://stackoverflow.com/questions/20138454/css-pseudo-element-in-inline-attribute-style — Daniel A. White, May 20 '15 at 14:26

score 3 · Accepted Answer · answered May 20 '15 at 14:29

3

Unfortunately you cannot have pseudoelements within inline styling. What you could do is have two sepparate CSS Classes like

.a:before {}
.b:before {}

This way you could use ngClass to add the appropriate class to your HTML

answered May 20 '15 at 14:29

Dan Moldovan

3,576
2
13
24

How to set the css of the li:before with ng-style

1 Answers1

Linked