CSS Progress Stepper not working on first step

Question

I followed a tutorial to make the following progress stepper. It won't show step 1 when it is set to active. The other steps work when they are set to active. Can someone please help me understand what needs to be changed in the CSS to allow step 1 to show as active?

I realize I could choose a different stepper, but I like this one because it's CSS only and I would like to learn from this issue.

 .container { width: 100%; position: absolute; z-index: 1; }.progressbar li { float: left; width: 20%; position: relative; text-align: center; list-style: none; }.progressbar { counter-reset: step; }.progressbar li:before { content: counter(step); counter-increment: step; width: 30px; height: 30px; border: 2px solid #bebebe; display: block; margin: 0 auto 10px auto; border-radius: 50%; line-height: 27px; background: white; color: #bebebe; text-align: center; font-weight: bold; }.progressbar li:after { content: ''; position: absolute; width: 100%; height: 3px; background: #979797; top: 15px; left: -50%; z-index: -1; }.progressbar li:first-child:after { content: none; }.progressbar li.active+li:after { background: #3aac5d; }.progressbar li.active+li:before { border-color: #3aac5d; background: #3aac5d; color: white }

 <div class="container"> <ul class="progressbar"> <li class="active">Step 1</li> <li>Step 2</li> <li>Step 3</li> <li>Step 4</li> <li>Step 5</li> </ul> </div>

Answer 1

If you add the active class to each <li> after it's done, then simply removing the +li from your selectors seems to work:

Fiddle: https://jsfiddle.net/fwpadbty/