用 ol + ::before + css 计数器可实现语义化、响应式步骤条，无需改 html 或 js；关键在 counter-reset/counter-increment 控制编号、position: relative + absolute 居中圆点、calc() 动态线长及 .step--active 类管理状态。

直接用 ol + ::before + CSS 计数器就能实现，不用改 HTML 结构，也不依赖 JS。关键在伪元素定位、计数器重置和引导线的分段控制——很多失败案例其实是把所有样式堆在 li 上，结果编号错位、连线断裂、响应式失效。

为什么不能直接用 ol 默认编号？

浏览器原生 ol 的编号是内联文本，无法单独控制大小、颜色、圆角或状态；更麻烦的是，它和文字共用行高，一旦文字换行或字体缩放，编号就会上下偏移。必须用 counter-reset + counter-increment + ::before 重建编号。

• ol 标签保留语义（利于可访问性和 SEO），但需加 list-style: none 关掉默认编号
• 每个 li 必须设 counter-increment: step，否则 counter(step) 不递增
• counter-reset: step 要写在 ol 上，不是 li 或 body

::before 画步骤圆点时常见偏移问题

圆点不居中、被文字挤歪、在小屏上重叠——根本原因是没隔离定位上下文和未适配行内布局。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给每个 li 加 position: relative，让 ::before 相对于它定位
• ::before 设 position: absolute，再用 top: 50% + transform: translateY(-50%) 垂直居中（比 line-height 可靠）
• 宽度/高度用 em 或 rem，例如 width: 1.4em; height: 1.4em，随字体缩放自动适配
• 避免用 margin-top 调位置——它会破坏 flex 布局的基线对齐

水平引导线怎么连得自然又不断裂？

用 ::after 在非首项上画线，但直接写固定宽度会在缩放或响应式时断开。

• 只给 li:not(:first-child)::before 画线（注意：不是 ::after，避免和圆点冲突）
• 线用 background: linear-gradient 实现，比 border 更易控制长度和颜色过渡
• 宽度设为 calc(100% - 1.4em)，减去当前圆点直径，确保线紧贴前一个圆点边缘
• 若用 flex 布局，ol 需设 justify-content: space-between，否则 calc() 会因间距不均失效

最易被忽略的是状态切换逻辑：进度高亮不能靠 :nth-child(2) 这类硬编码，必须用 .step--active 类手动控制——否则增删步骤时，CSS 规则就全乱了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！