html 代码以及样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css步骤条</title>
<style>
.steps {
display: flex;
justify-content: space-between;
padding: 0;
margin: 20px 10px;
list-style: none;
counter-reset: order; /* 定义css 计时器 */
--normal-color: #666;
--active-color: #06e;
}
.steps li {
counter-increment: order; /* 选择器增量 */
color: var(--active-color); /* 定义变量,默认都是高亮颜色 */
}
.steps li::before {
content: counter(order); /* 使用计数器的数字作为内容 */
display: inline-block;
width: 1.4em;
margin-right: 0.5em;
text-align: cente