使用伪元素(::after)结合绝对定位实现步骤间连接线，通过left和width的calc计算精准定位线条起止位置；2. 为每个步骤设置position: relative作为定位上下文，伪元素通过top: 50%和transform: translatey(-50%)垂直居中；3. 利用z-index确保圆圈和内容显示在连接线上层；4. 通过.active类控制激活状态的颜色变化，并使用.step.active::after和.step.active ~ .step::after使当前及之前步骤的连接线同步变色；5. 最后一个步骤通过display: none隐藏伪元素避免多余线条；该方案无需额外html标签，保持结构简洁且样式灵活可控，完整实现了美观的步骤进度连接线效果。
创建CSS步骤进度连接线，通常会利用伪元素（
::before
或
::after
）结合绝对定位（
position: absolute
）来实现。这种方法能灵活地在步骤元素之间绘制线条，既能模拟进度条的连接感，又能保持DOM结构的简洁，避免了额外无意义的HTML标签。
解决方案
要实现步骤进度连接线，我们的核心思路是为每个步骤元素（或者除了最后一个之外的步骤元素）添加一个伪元素，然后通过绝对定位将这个伪元素放置在它应该连接的位置。
以下是一个经典的水平进度条实现方案：
立即学习“前端免费学习笔记（深入）”；
首先，我们有一个包裹所有步骤的容器，每个步骤内部包含一个表示进度的圆圈和一个标题。
<div class="progress-steps"> <div class="step active"> <div class="step-circle">1</div> <div class="step-title">购物车</div> </div> <div class="step"> <div class="step-circle">2</div> <div class="step-title">确认订单</div> </div> <div class="step"> <div class="step-circle">3</div> <div class="step-title">付款</div> </div> <div class="step"> <div class="step-circle">4</div> <div class="step-title">完成</div> </div> </div>
接着是关键的CSS部分。这里面包含了我们如何利用伪元素和绝对定位来绘制连接线，以及如何处理不同状态下的样式。
.progress-steps {
display: flex; /* 使用Flexbox让步骤横向排列 */
justify-content: space-between; /* 步骤之间均匀分布空间 */
align-items: center; /* 垂直居中对齐 */
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
position: relative; /* 为可能存在的整体进度条或未来扩展留出定位上下文 */
overflow: hidden; /* 防止伪元素超出容器 */
}
.step {
flex: 1; /* 每个步骤占据等宽空间 */
text-align: center;
position: relative; /* 为伪元素提供定位上下文 */
display: flex; /* 内部元素（圆圈和标题）垂直居中 */
flex-direction: column;
align-items: center;
z-index: 1; /* 确保步骤内容（特别是圆圈）在连接线之上 */
}
.step-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ccc; /* 默认颜色 */
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 1.1em;
transition: background-color 0.3s ease; /* 动画效果 */
position: relative; /* 确保圆圈在连接线之上 */
z-index: 2; /* 确保圆圈始终在最上层 */
}
.step-title {
margin-top: 10px;
color: #666;
font-size: 0.9em;
transition: color 0.3s ease;
}
/* 核心：使用::after伪元素创建连接线 */
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50%; /* 垂直居中 */
left: calc(50% + 20px); /* 从当前圆圈的右边缘开始（圆圈宽度40px，半径20px） */
width: calc(100% - 40px); /* 线的长度，覆盖到下一个圆圈的左边缘 */
height: 4px; /* 线的粗细 */
background-color: #ccc; /* 默认线的颜色 */
transform: translateY(-50%); /* 垂直方向的精确居中 */
z-index: 0; /* 将线放在圆圈的下方 */
transition: background-color 0.3s ease; /* 动画效果 */
}
/* 激活状态的样式 */
.step.active .step-circle {
background-color: #007bff; /* 激活状态的圆圈颜色 */
}
.step.active .step-title {
color: #007bff; /* 激活状态的文字颜色 */
}
/* 激活步骤后的连接线也变为激活状态的颜色 */
.step.active::after, /* 激活步骤自己的连接线 */
.step.active ~ .step::after { /* 激活步骤后面所有步骤的连接线（已完成的线） */
background-color: #007bff;
}
/* 针对最后一个步骤，它不需要连接线 */
.progress-steps .step:last-child::after {
display: none;
}
这段CSS的巧妙之处在于
::after
伪元素的
left
和
width
计算。
left: calc(50% + 20px)
确保线从当前步骤圆圈的右侧边缘开始，而
width: calc(100% - 40px)
则让线延伸到下一个步骤圆圈的左侧边缘，完美地填补了两个圆圈之间的空隙。通过
z-index
，我们还能控制圆圈始终显示在连接线的上方。
为什么伪元素和绝对定位是理想选择？
说实话，当我第一次尝试制作这种进度条时，也考虑过直接在HTML里加
<div>
来做线，但很快就发现那会让DOM变得很臃肿，而且语义上也不太对——那些线只是视觉上的装饰，并不是内容的一部分。这时候，伪元素 (
::before
和
::after
) 的优势就体现出来了。
伪元素是CSS提供的一种机制，允许你在不增加额外HTML标签的情况下，生成并插入内容。对于进度条的连接线这种纯粹的装饰性元素，它们简直是完美的选择。它们依附于现有的HTML元素，却又独立于正常的文档流，非常适合用来绘制这些“非内容”的视觉组件。
而绝对定位（
position: absolute
）则是伪元素的最佳搭档。一旦你将伪元素设置为
position: absolute
，它就能脱离正常的文档流，并根据其最近的、已定位的祖先元素（通常是
position: relative
的父元素）进行精确的定位。这正是我们需要的：让线段能够精准地放置在两个步骤圆圈之间，不受其他元素布局的影响。通过
top
,
left
,
right
,
bottom
属性，我们可以精确控制线段的起始和结束位置，再配合
width
或
暂无评论内容