垂直进度条用CSS伪类标记当前步骤需用.step--active::before画圆点、linear-gradient画进度线，配合flex布局和transform居中实现响应式对齐，避免绝对定位和border导致的错位与模糊。
垂直进度条怎么用 CSS 伪类标记“当前步骤”
关键在 ::before 和 ::after 配合 data-step 属性或类名切换，而不是靠 JS 动态加 class。纯 CSS 可控，但必须保证 HTML 结构有明确的“步骤容器”和“步骤项”层级。
常见错误是把所有步骤都写成绝对定位，结果响应式时错位；或者用 transform: scaleY() 拉伸伪元素做进度，但缩放会模糊边框、破坏圆角。
- 每个步骤项用
position: relative，让伪元素能精准锚定 - 当前步骤用
.step--active类（不推荐用:nth-child(2)这类硬编码，后期增删步骤就崩） - 垂直方向的进度线建议用
linear-gradient背景实现，比 border 更可控
响应式下如何保持垂直对齐不偏移
核心问题是：不同屏幕宽度下，步骤文字换行、图标尺寸变化，会导致 top 偏移计算失效。别用固定 px 值控制伪元素位置。
推荐用 flex + align-items: center 布局步骤项，再让伪元素通过 top: 50% + transform: translateY(-50%) 居中对齐。这样不管文字几行、图标多大，垂直中心始终稳定。
立即学习“前端免费学习笔记（深入）”；
- 步骤容器设
display: flex; flex-direction: column; gap: 1.5rem - 每个步骤项设
display: flex; align-items: center; position: relative - 进度线伪元素放在第一个步骤项之外的独立容器里（比如
.progress-line），避免被单个步骤的 flex 影响
用 ::before 画当前步骤的圆点，为什么常出现重叠或错位
因为没隔离定位上下文。如果父容器没设 position: relative，::before 会相对于最近的已定位祖先找位置，极易错乱。
更隐蔽的问题是：多个步骤共用同一套伪元素规则，但没用属性选择器区分状态。比如写了 .step::before，结果所有步骤都画了圆点，而不是只画 .step--active::before。
- 务必给每个步骤项加
position: relative - 圆点伪元素只写在
.step--active::before上，不要泛化 - 圆点大小用
em或rem，比如width: 1.2em; height: 1.2em，随字体缩放自然适配 - 避免用
border-radius: 50%配合非正方形尺寸——宽高不等时不是真圆
移动端小屏下进度线太细看不清怎么办
不是简单加大 border-width，而是换思路：用 background-image: linear-gradient() 画线，它支持响应式单位和媒体查询微调。
例如，在 @media (max-width: 480px) 里把进度线背景从 linear-gradient(to bottom, #e0e0e0 0%, #e0e0e0 100%) 改成 linear-gradient(to bottom, #d0d0d0 0%, #d0d0d0 100%) 并加宽到 4px 高度，视觉更清晰，且不会影响布局流。
- 进度线高度统一用
height控制，不用border—— border 会撑开容器，height 不会 - 圆点和文字间距用
gap或margin-inline-start，别用margin-left，否则 RTL 页面翻车 - 真正在意兼容性的话，避开
aspect-ratio控制圆点，IE 和旧 Safari 不支持
最易被忽略的是：伪元素的 z-index 没设，导致圆点被后续步骤遮住；或者用了 opacity: 0.7 却忘了在 .step--active 里重置为 1，结果当前步骤的圆点反而更淡。
