纯css步骤条需用data-step属性、伪元素和兄弟选择器实现状态控制；::before画圆点，::after绝对定位画连接线；响应式下改垂直布局并隐藏连线，统一用flex+align-items:center确保对齐。

步骤条组件不需要 JS 就能实现，但必须用 CSS 控制状态切换的视觉反馈；纯 CSS 实现的关键在于合理利用 data-step 属性、伪元素和兄弟选择器，而不是依赖 class 切换逻辑。

用 ::before 和 ::after 画连接线与圆点

连接线不能用 border-bottom 拉长——它无法独立控制起止位置或响应状态变化。推荐用绝对定位的伪元素画线，圆点用 ::before 绘制：

• 每个步骤项（<li>）设 position: relative，为伪元素提供定位上下文
• ::before 画圆点：固定宽高 + border-radius: 50% + 背景色，通过 data-step="active" 控制颜色
• ::after 画连接线：用 width: 100% 的绝对定位元素，left 设为圆点半径，right 设为相邻圆点左边缘，避免硬编码像素值
• 首项不画左线，末项不画右线——用 :first-child::before 和 :last-child::after 配合 display: none 控制

用 [data-step] 属性驱动状态样式，别用一堆 class

写 class="step-active step-finished step-error" 很难维护。统一用 data-step 值区分状态：

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

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

下载

• data-step="pending"：灰阶圆点 + 虚线连接
• data-step="active"：主色实心圆点 + 实线连接
• data-step="done"：主色圆点 + 内嵌对勾图标（可用 content: "✓" 或 SVG background-image）
• 所有状态样式都基于属性选择器，例如 [data-step="done"]::before，避免 class 名冲突和 JS 多次操作 DOM

响应式断点下隐藏连接线、改为垂直堆叠

小屏设备上水平步骤条会挤压文字、溢出容器。不要用 flex-wrap 强行折行——连接线会错位。正确做法是：

• 在 @media (max-width: 768px) 中，把 ol 设为 flex-direction: column
• 将 ::after 连接线设为 display: none，改用 margin-bottom 模拟间距
• 圆点 ::before 改为居左显示，文字左对齐，保持视觉层级清晰
• 注意：vertical-align 不生效于 flex 容器子项，改用 align-items: flex-start 控制圆点与文字基线对齐

最易被忽略的是圆点与文字的垂直对齐方式——用 top: 50% + transform: translateY(-50%) 定位圆点时，如果父容器 line-height 变化（比如多行文本），圆点就会偏移。稳妥做法是统一用 flex 布局步骤项，并设置 align-items: center。

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