这种效果吗,动态添加 active 样式,应该可行;
*{
margin: 0;
padding: 0;
}
.step{
position: relative;
width: 40px;
height: 40px;
float: left;
margin-right: 100px;
background-color: #ccc;
border-radius: 50%;
}
.step:after{
position: absolute;
display: block;
content: '';
width: 100px;
height: 4px;
top: 18px;
left: 40px;
background-color: #ccc;
}
.end{
width: 40px;
height: 40px;
float: left;
background-color: #ccc;
border-radius: 50%;
}
.step.active{
background-color: #00ee00;
}
.step.active:after{
background-color: #00ee00;
}