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.

Answer 1

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