<ol class="steps">
<li>注冊(cè)</li>
<li>域認(rèn)證</li>
<li>身份校驗(yàn)</li>
<li>風(fēng)險(xiǎn)等級(jí)評(píng)估</li>
<li>開(kāi)通賬號(hào)</li>
</ol>
.steps {
--normal-color: #666;
--active-color: #06e;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
counter-reset: order;
}
/* 步驟項(xiàng) */
.steps > li {
flex: auto;
display: inline-flex;
align-items: center;
counter-increment: order;
color: var(--active-color);
}
.steps > li:last-child {flex: none;}
/* 步驟編號(hào)（帶圈數(shù)字） */
.steps > li::before {
content: counter(order);
flex-shrink: 0;
width: 1.4em;
line-height: 1.4em;
margin-right: .5em;
text-align: center;
border-radius: 50%;
border: 1px solid;
}
/* 步驟項(xiàng)引導(dǎo)線 */
.steps > li:not(:last-child)::after {
content: '';
flex: 1;
margin: 0 1em;
border-bottom: 1px solid;
opacity: .6;
}
/* 步驟狀態(tài) */
.steps > .active {color: var(--active-color);}
.steps > .active::before {
color: #fff;
background: var(--active-color);
border-color: var(--active-color);
}
.steps > .active::after,
.steps > .active ~ li {color: var(--normal-color);}
400 186 1886
