如何在Bootstrap 5中用CSS伪元素定制步骤进度条组件

Bootstrap 5 无原生步骤条组件，须用语义化 <ol> 或 <nav> 结构配合伪元素绘制连接线，并通过 JS 动态管理 aria-current、tabindex 及响应式连线方向。

步骤条不是progress，别用.progress-bar硬套

Bootstrap 5 根本没有原生步骤条（steps/wizard）组件。.progress 是数值型反馈控件，语义上只表达“已完成 60%”，不表达“当前在第 2 步、第 1 步已提交、第 3 步不可点击”。强行把 aria-valuenow="40" 当步骤编号用，会导致屏幕阅读器读成“百分之四十”，而非“第二步”。

真正可用的起点是语义化结构：用 <ol> 或 <nav> 包裹步骤项，每个步骤用 <li> 或 <li><a>，再靠伪元素画连接线。

用::before画水平连接线，关键在position: absolute和transform

连接线必须脱离文档流，否则会撑开容器高度或破坏 flex 布局。最稳妥做法是给每个步骤项加 position: relative，然后用 ::before 绘制从左到右的线段：

• 只给非首项添加 ::before，避免首项左侧多出半截线
• content: "" + position: absolute + top: 50% + left: -50% + width: 100% + height: 2px
• 用 transform: translateY(-50%) 居中，而不是靠 margin-top —— 后者在 flex 容器里容易错位
• 线的颜色和状态联动：当前步之前用 bg-success，之后用 bg-muted，通过 JS 切换父级 class 控制

响应式下flex-column切换时，伪元素方向要重置

小屏竖排时，连接线得从上往下走，但很多人忘了改伪元素的定位逻辑——仍用 left: -50% 和 width: 100%，结果线跑到了左边空白处。

立即学习“前端免费学习笔记（深入）”；

正确做法是用媒体查询重置：

• 竖排时把 ::before 的 left 改为 top，width 改为 height
• transform: translateX(-50%) → transform: translateY(-50%)
• 确保父容器在竖排时有足够高度容纳连线，别让 flex-fill 把步骤项压扁

状态样式不能只靠颜色，要同步控制aria-current和tabindex

仅用 text-success 或 bg-success 不足以满足可访问性要求。键盘用户 tab 导航时，未激活步骤若没设 tabindex="-1"，会误入不可操作项；屏幕阅读器若没识别当前步，会跳过整个流程。

必须配合 JS 动态管理：

• 当前步骤加 aria-current="step"，并确保 tabindex="0"
• 已完成步骤加 tabindex="-1"，禁用聚焦但保留语义
• 未开始步骤移除 tabindex，或显式设为 -1 并加 aria-disabled="true"
• 别依赖 CSS pointer-events: none 拦截点击——它不阻止键盘触发，也不影响读屏软件

伪元素画线这事看着轻量，但一旦混进状态切换、响应式、可访问性三重约束，稍一松懈就变成看不见的坑。最常被忽略的是：竖屏连线方向没重置、aria-current 没随 JS 状态同步、以及把 .progress-bar 当步骤节点用——这三处错，会让整条步骤流在辅助技术下彻底失效。