怎么用 CSS Counter 实现步骤条自动编号
直接用 counter-reset 和 counter-increment 就能驱动编号，不需要 JS 或写死数字。关键不是“能不能”，而是“怎么让编号和视觉进度对齐”。
-
counter-reset放在步骤容器（比如.steps）上，初始化计数器名称（如step） - 每个步骤项（
.step）用counter-increment: step触发递增 - 用
::before伪元素 +content: counter(step)渲染编号 - 如果想从 0 开始或跳过某步，给对应项加
counter-increment: step -1或step 0
为什么步骤条的“已完成”状态不能只靠 counter 控制
CSS Counter 只管编号，不管状态样式。进度提示（比如绿色实心圆、连线变色、文字高亮）得靠额外类名或属性控制，比如 .step.is-done。
- 常见错误：以为
counter()能返回当前值用于条件判断——它不能，CSS 没有运行时逻辑 - 必须手动加类（如 JS 切换
is-done），或用属性选择器（如[data-step="2"]）配合 HTML 控制 - 若用
:nth-child(n)模拟“前 n 步完成”，会和实际业务逻辑脱节，用户回退时容易错乱
连线（line）怎么跟着编号对齐且不被遮挡
步骤条里的横线通常用绝对定位 + 伪元素画，难点是左右两端要精准卡在编号圆点中心，且不能盖住编号文字。
- 编号容器（
.step）设position: relative，确保子元素定位基准一致 - 连线伪元素（
::after）用left: 50%+transform: translateX(-50%)居中起始点 - 宽度别写死，改用
width: calc(100% - var(--step-width))，其中--step-width是单个步骤宽度，避免响应式断裂 - 务必设
z-index: 1给编号，z-index: 0给连线，否则圆点可能被线盖住
IE 兼容或需要 fallback 时怎么办
IE11 支持 counter-reset/increment，但不支持 counter(name, decimal-leading-zero) 这类格式化语法，且伪元素渲染偶尔错位。
立即学习“前端免费学习笔记（深入）”；
- 别用
counter(step, lower-roman)等格式——IE 不认，直接显示空 - 降级方案：HTML 里保留
data-step="1"，CSS 用[data-step="1"]::before { content: "1" }手动写死（仅限步骤数固定） - 更稳妥的是用 JS 注入编号，CSS 只管样式；Counter 作为增强，检测支持后才启用
- 移动端 Safari 旧版本对
counter()在 flex 容器中的计算有偏差，建议给.step加flex-shrink: 0
最麻烦的其实是“动态步骤”——比如异步加载步骤、可跳过的步骤、带校验的步骤。这时候 CSS Counter 只能负责展示，状态流转必须由 JS 驱动，别试图用纯 CSS 拦截逻辑。
