先上效果圖
html內容:
<ul class="steps">
<li>用戶信息</li>
<li>孩子信息</li>
<li>孩子父母</li>
<li class="active">完成提交</li>
</ul>'
添加樣式:
.steps {
position: relative;
margin-bottom: 30px;
counter-reset: step; /*創建步驟數字計數器*/
}
/*步驟描述*/
.steps li {
list-style-type: none;
font-size: 12px;
text-align: center;
width: 25%;
position: relative;
float: left;
}
/*步驟數字*/
.steps li:before {
display: block;
content: counter(step); /*設定計數器內容*/
counter-increment: step; /*計數器值遞增*/
width: 32px;
height: 32px;
background-color: #019875;
line-height: 32px;
border-radius: 32px;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: 700;
margin: 0 auto 8px auto;
}
/*連接線*/
.steps li ~ li:after {
content: '';
width: 100%;
height: 2px;
background-color: #019875;
position: absolute;
left: -50%;
top: 15px;
z-index: -1; /*放置在數字後面*/
}
/*將當前/完成步驟之前的數字及連接線變綠*/
.steps li.active:before,
.steps li.active:after {
background-color: #019875;
}
/*將當前/完成步驟之後的數字及連接線變灰*/
.steps li.active ~ li:before,
.steps li.active ~ li:after {
background-color: #777;
}