CSS 進度步進器在第一步不工作

Question

我按照教程制作了以下進度步進器。 當它設置為活動時，它不會顯示第 1 步。 其他步驟在設置為活動時起作用。 有人可以幫我了解 CSS 中需要更改的內容以允許步驟 1 顯示為活動嗎？

我意識到我可以選擇不同的步進器，但我喜歡這個，因為它只是 CSS，我想從這個問題中學習。

 .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

如果在完成后將active的 class 添加到每個<li> ，那么只需從選擇器中刪除+li似乎就可以了：

小提琴： https://jsfiddle.net/fwpadbty/