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

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.

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.

• javascript
• html
• angularjs

Share Improve this question Follow asked May 20, 2015 at 14:23 user2774431user2774431 5311 silver badge66 bronze badges 3

• you can't. style does not work with pseudo-elements. – Daniel A. White Commented May 20, 2015 at 14:25
• ngstyle uses inlinestyle so it is not possible stackoverflow./questions/14141374/… – Arun P Johny Commented May 20, 2015 at 14:25
• stackoverflow./questions/20138454/… – Daniel A. White Commented May 20, 2015 at 14:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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