最简结构纯CSS步骤条用<ol>语义化列表，.step-bar li::before生成序号圆点，li:not(:last-child)::after绘制连接线，通过flex: 1均分空间并用right: -50%精准对齐连线，无需JS即可静态展示且兼顾可访问性。
步骤条怎么用 CSS 实现最简结构
纯 CSS 实现步骤条，核心是用 ol 或 ul 列表 + 伪元素 ::before 绘制圆点和连线，不需要 JS 就能静态展示进度。关键不是“多好看”，而是“结构语义正确、可访问、易扩展”。
推荐用 ol（有序列表），因为步骤有明确顺序，屏幕阅读器能识别序号：
<ol class="step-bar"> <li class="step done">填写信息</li> <li class="step active">确认订单</li> <li class="step">支付完成</li> </ol>
-
done表示已完成，active表示当前步，空 class 表示未开始 - 所有
li必须有文本内容，否则影响可访问性 - 避免用
float或绝对定位做连线——容易错位，优先用flex+border-bottom模拟横线
CSS 样式里哪些属性最容易导致连线断裂
常见错误是给 li 设了 width 或 min-width，又没配 flex-shrink: 0，导致小屏下文字换行、圆点偏移、连线断开。
可靠写法是让容器 display: flex，每个 li 占等分空间：
立即学习“前端免费学习笔记（深入）”；
.step-bar {
display: flex;
counter-reset: step;
}
.step-bar li {
flex: 1;
position: relative;
text-align: center;
}
.step-bar li::before {
content: counter(step);
counter-increment: step;
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 50%;
background: #e0e0e0;
color: #666;
display: inline-block;
}
.step-bar li.done::before,
.step-bar li.active::before {
background: #4caf50;
color: white;
}
.step-bar li:not(:last-child)::after {
content: '';
position: absolute;
top: 14px;
left: 50%;
right: -50%;
height: 2px;
background: #e0e0e0;
}-
right: -50%是关键：确保连线从当前项中点延伸到下一项中点，不依赖固定宽度 - 如果用了
font-size: 0清除 inline 元素间隙，记得在li里重设font-size - IE11 不支持
flex下的gap，别用它替代margin控制间距
如何用 JavaScript 动态更新步骤状态
状态更新本质就是操作 DOM class，但要注意：不能只改 class，还得同步更新 aria-current 和 aria-disabled 属性，否则对键盘用户不友好。
简单封装一个切换函数：
function setStepActive(index) {
const steps = document.querySelectorAll('.step-bar li');
steps.forEach((el, i) => {
el.classList.remove('done', 'active');
el.removeAttribute('aria-current');
el.setAttribute('aria-disabled', 'true');
if (i < index) {
el.classList.add('done');
el.setAttribute('aria-disabled', 'false');
}
if (i === index) {
el.classList.add('active');
el.setAttribute('aria-current', 'step');
el.setAttribute('aria-disabled', 'false');
}
});
}- 调用时传入 0-based 索引，比如
setStepActive(1)表示第二步激活 - 不要用
innerHTML替换整个li，会丢失焦点和事件绑定 - 如果步骤支持回退，需检查上一步是否为
done，否则不允许跳转
移动端适配时文字折行把圆点顶歪了怎么办
小屏下文字撑开 li 宽度，圆点被挤到顶部或底部，根本原因是 line-height 和 vertical-align 没对齐。
解决方式很直接：强制单行 + 溢出省略，并让圆点脱离文本流：
.step-bar li::before {
/* ...原有样式 */
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.step-bar li span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px;
margin: 0 auto;
}- 把步骤文字包在
span里，方便单独控制 -
max-width值要结合字体大小测试，14px 字体下 80px 通常够用 - 千万别用
word-break: break-all，中文会断字，体验极差
真正麻烦的是多语言场景——比如英文步骤词很长，或者阿拉伯语右向布局，这时候得靠 JS 测量容器宽度再动态截断，而不是靠 CSS 硬扛。
