我用的是codepen的一些代码，带有步进控制.我不太擅长CSS，而且我遇到了一个codepen中没有出现的问题，所以我假设是另一个CSS类，它是在一个很长的样式表中定义的，与其他队友共享.我试图解决的问题是类中定义的行.李:之后仍然在班上名列前茅.李:之前，这就是圆的定义.
li:after最初提供了z-index:-1和li:before没有z-index属性，但是这些行没有出现，它们隐藏在一个div后面，所以我不得不修改它，这就是代码片段中显示的内容.虽然z-index:-1在代码段中有效，但在我想要实现的地方不起作用.
第一张图显示了CSS步进器的结果，它直接从codepen到我的页面，z-index:-1
另一幅图显示了try 调整z索引属性后的结果:
这是所需的输出:
以下是片段:
.container {
width: 600px;
margin: 100px auto;
z-index: -1;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #666666;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #666666;
top: 15px;
left: -50%;
display: block;
z-index: 1;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
line-height: 30px;
border: 2px solid #666666;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
z-index: 999999;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active + li:after {
background-color: #55b776;
}<div class="container">
<ul class="progressbar">
<li >aaaaaa</li>
<li class="active">bbbbbbbbbt</li>
<li>cccccccc</li>
<li>ddddddddd</li>
</ul>
</div>我能得到一些帮助来解决这个问题吗？或者我可以从哪里开始寻找？
我想已经说完了，但是如果我留下了什么，我会尽力完成这篇文章.
提前谢谢，