Question : Styling the linking line between two visited steps

[NA-Jalilius]

Hello Mr. @madoar ,
I'm interested in how @Gevko did succeed in #183 to change the color of the horizontal line linking/between two visited steps like int the picture below based on what you were asking for. Because whenever I try to play with the CSS I finish by styling the whole line, not only the part of the visited steps :/
Thank you guys in advance for your help =)

[madoar]

You can change the properties of the lines connecting two circles by using:

aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li:not(:last-child):before {
   ...
}

Here it is important to understand that :before is kind of misleading in this case because you modify the line that comes after the matches circle. Following up you can change the color of all lines that begin at a completed step to green by using:

aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li.done:not(:last-child):before {
   background-color: green !important;
}

Please be aware that this can look somehow stupid in some instances, for example if you back to a previous step. In this case you would have a break inside your green line because of the editing step. To prevent this you will need to match other indicator states as well. For more details please take a look at the used css and scss of the wizard which you can either find here or by using the debugger of your favorite browser.

@earshinov while writing this I stumbled over our misusing of :before. I think :after would be a more fitting choice. What do you think about this? Do you see a reason why we should stick with :before?

[NA-Jalilius]

Okey, I get it now, I had missed the "li.done:not(:last-child):before" part in my used CSS selector.
And indeed I thought that a :before would have been of great use in this case I believe.
Thank a lot Chief, and by the way, let me Thank you a lot for all this amazing job =)
Thanks again @madoar and have a nice day !
I'm closing this Issue as I got my answer 💯

[earshinov]

@earshinov while writing this I stumbled over our misusing of :before. I think :after would be a more fitting choice. What do you think about this? Do you see a reason why we should stick with :before?

Yes, I agree that :after would be more semantically correct. I don't see reasons to stick with :before apart from backward compatibility with customized styles some library users might have.