::before画线偏移的根本原因是伪元素定位原点与节点中心不匹配；需对非首项.step用absolute定位，left:-50%+width:100%+transform:translatey(-50%)，且每个.step必须设position:relative和min-width:0。
为什么 ::before 画线总偏一截？
常见错误是直接给每个 .step 加 ::before，结果第一条线从第一个节点左边冒出，或者线段终点没对准上一个节点中心。根本原因是没控制好伪元素的定位原点和尺寸基准。CSS 中 ::before 默认以自身左上角为起点，而连接线需要“从上一节点中心出发、指向当前节点中心”，所以必须让伪元素的 left 值和 width 精确对应两个中心点的水平距离。
关键做法是：只作用于 .step:not(:first-child)，用 position: absolute + left: -50% + width: 100% + transform: translateY(-50%)。其中 left: -50% 是让伪元素左边缘对齐当前节点中心，width: 100% 才能刚好覆盖到前一个节点中心位置（因父容器 flex 等分，相邻节点中心间距 = 容器宽度 ÷ (n−1)）。
position: relative 必须加在父容器还是每个 .step 上？
必须加在每个 .step 元素上，不能只加在最外层容器。因为 ::before 的绝对定位参考的是**最近的已定位祖先**；如果只给 .steps 加 position: relative，所有伪元素都会相对于这个大容器定位，一旦步骤数变化或响应式缩放，left 和 top 就全乱了。
正确写法是：
.step {
position: relative;
flex: 1;
min-width: 0;
}
这样每个伪元素都以自己所在 .step 为坐标系，left: -50% 才真正表示“向左移动自身宽度一半”，从而锚定中心点。
移动端竖排步骤条怎么改连线方向？
水平步骤条的连接线是横向的，但竖排时需改为垂直线，且要避免文字高度不一致导致圆圈错位。此时不能复用 ::before 横向逻辑，而应改用 ::after 并切换坐标轴：
- 把
top: 50% 改成 left: 50%
- 把
transform: translateY(-50%) 改成 transform: translateX(-50%)
- 把
width 改为 height，height: 2px → width: 2px
- 用
bottom: -50% 或 top: 100% 控制起始位置，确保线从上一节点底部连到当前节点顶部
top: 50% 改成 left: 50%
transform: translateY(-50%) 改成 transform: translateX(-50%)
width 改为 height，height: 2px → width: 2px
bottom: -50% 或 top: 100% 控制起始位置，确保线从上一节点底部连到当前节点顶部更稳妥的做法是：用媒体查询单独切一套竖排规则，避免同一伪元素在不同方向下反复重算。
为什么 transform-origin 在这里不适用？
有人试图用 transform: rotate() 配合 transform-origin 画斜线或动态连线，但这在纯 CSS 步骤条中属于过度设计。步骤条的节点位置是静态、等距、水平/垂直排列的，不需要角度计算；强行引入 rotate 反而会因基点偏移、小数像素渲染、缩放失真等问题导致线条“虚边”或“错位一个像素”。只有当两点坐标完全动态（如拖拽流程图）时，才值得上 JS 计算 + transform-origin: top left 方案。
真正容易被忽略的细节是：所有涉及 % 的定位值（如 left: -50%）都依赖于元素自身的 width。如果 .step 内部有 display: flex 且子项未设 min-width: 0，文字撑开会导致宽度波动，进而让 -50% 失准——所以 min-width: 0 不是可选项，是必选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
