<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
list-style-type: none;
}
.jishuqi{
counter-reset: section;
list-style-type: none;
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
.jishuqi > li{
margin-bottom: 10px;
font-size: 12px;
flex: 1;
position: relative;
text-align: center;
}
.jishuqi > li::before{
counter-increment: section;
content: counter(section);
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 1px solid #333;
display: inline-block;
font-size: 12px;
margin-right: 15px;
border-radius: 20px;
}
.jishuqi > li::after{
content: '';
height: 1px;
width: 20%;
background-color: #333;
display: inline-block;
position: absolute;
top: 50%;
right:-10%;
}
.jishuqi > li:last-child::after{
content: '';
display: none;
}
.jishuqi > li.active{
color: red;
}
.jishuqi > li.active::before{
background: red;
color: #fff;
}
.jishuqi > li.active::after{
content: '';
background-color: red;
}
</style>
<body>
<ul class="jishuqi">
<li>步骤一</li>
<li>步骤二</li>
<li>步骤三</li>
<li class="active">步骤四</li>
<li>步骤四</li>
<li>步骤四</li>
<li>步骤四</li>
</ul>
</body>
</html>
