用 position: relative 是因步骤项需保持文档流以实现顺序排列、自动换行和响应式缩放；relative 不脱离流，仅提供子元素定位参考，而 absolute 会导致堆叠错位。
为什么用 position: relative 而不是 absolute 给步骤项容器？
因为步骤条需要保持文档流——每个步骤项（如“第一步”“第二步”）得按顺序排列、自动换行、响应式缩放。position: relative 不脱离流，只是为子元素（比如 ::after 伪元素）提供定位参考点；而如果给 li 或 div.step 直接设 absolute，它们会堆叠在一处，失去顺序和间距。
实操建议：
- 给每个步骤容器（例如
.step）设position: relative - 确保它有明确宽度或内联块行为（如
display: inline-block），否则::after可能定位不准 - 避免父容器（如
.steps）设overflow: hidden，否则圆点指示器可能被裁掉
如何用 ::after 画出居中圆点并连接成线？
::after 本身不占布局空间，适合画装饰性指示器。关键在用 transform: translate(-50%, -50%) 居中，配合 top: 50% 和 left: 50% —— 这样无论容器尺寸怎么变，圆点始终在中心。
常见错误现象：圆点偏左/偏上、连线断开、响应式下错位。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 圆点样式：
content: ""+width/height+border-radius: 50%+background - 连线用另一个
::before（或额外元素），放在步骤项之间，宽度设为100%并position: absolute，top: 50%，left: 100%，再用transform: translateX(-50%)对齐 - 第一个步骤不需要左侧连线，最后一个不需要右侧连线——用
:not(:first-child)::before控制
active 状态下怎么只高亮当前步骤及之前所有步骤？
不能只靠 .step.active::after，因为连线和前序圆点也要变色。最稳的方式是给整个步骤条加一个 data-current="2" 属性，然后用属性选择器批量控制：
.steps[data-current="2"] .step:nth-child(-n+2) .step-dot {
background: #007bff;
}
.steps[data-current="2"] .step:nth-child(-n+2)::before {
background: #007bff;
}
这样比 JS 动态加 class 更轻量，也避免状态同步问题。
注意点：
-
:nth-child(-n+2)表示第 1 和第 2 个子元素，适用于静态 HTML 结构 - 如果步骤是动态渲染（如 Vue/React），推荐用类名控制（如
.step--done），再配合.step--active - 别忘了处理圆点边框、阴影、文字颜色的同步变化，否则视觉割裂
移动端适配时，::after 指示器为什么会消失或挤压变形？
根本原因是伪元素尺寸写死了像素值（如 width: 24px），而容器在小屏下变窄，left: 50% + transform 仍生效，但可能超出父容器边界被裁剪，或因字体缩小导致行高塌陷，影响垂直定位基准。
实操建议：
- 把圆点尺寸换成
em或rem（如width: 1.5em），跟随文本缩放 - 步骤容器用
flex布局替代inline-block，配合flex-wrap: wrap和媒体查询切换为竖排 - 在小屏下隐藏连线，只保留圆点+文字，用
@media (max-width: 480px)单独重置::before
最容易被忽略的是：伪元素默认不继承 color，所以用 background: currentColor 让圆点随文字色变化，比硬编码颜色更健壮。
