如何用CSS伪元素和Border-left打造长尾词式垂直步骤条？

本文共计1172个文字，预计阅读时间需要5分钟。

使用是稳定的语义化起点，不建议使用堆砌。每个代表一个步骤节点，容器设置为flex-direction: column或绝对定位，但必须保证子项垂直排列且上下关系明确。

关键点在于：步骤圆点（.step-circle）和连接线（.step-line）要分离控制。圆点用绝对定位居中在左侧，连接线用伪元素或额外元素画在圆点右侧——但更轻量的做法是让 ::before 画竖线，::after 画圆点，这样 DOM 更干净。

• 避免给 li 设固定高度，用 padding-bottom 控制间距更灵活
• 连接线高度不能写死，应由 JS 动态计算或用 height: 100% 配合父容器 position: relative
• 最后一个步骤的连接线必须隐藏，否则会多出一截：用 .step:last-child .step-line { display: none; }

用 ::before 画竖线时 border-left 怎么配

竖线本质是一条细长矩形，border-left 最省事，但要注意它依赖父元素的 height 和 position。常见错误是直接在 li 上写 border-left: 2px solid #ddd —— 这会让所有步骤都带左边框，破坏单一线条效果。