CSS如何做一个带进度提示的步骤条_利用计数器Counter属性自动编号css

怎么用 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 拦截逻辑。