CSS如何创建多步骤进度条？counter计数器应用

絕刀狂花

发布时间：2025-08-06 10:29:01

431人浏览过

来源于php中文网

原创

使用css计数器可纯css实现多步骤进度条，答案是：通过counter-reset初始化计数器，counter-increment递增，content: counter()显示序号，1. 利用html结构定义步骤容器；2. 在css中设置counter-reset: step初始化计数器；3. 每个步骤通过counter-increment: step递增；4. 使用::before伪元素配合content: counter(step)显示自动编号；5. 通过.active类控制当前步骤样式；6. 用伪元素绘制连接线并结合相邻兄弟选择器改变进度颜色；7. 响应式设计采用flex布局，小屏可堆叠或滚动；8. 动态步骤由js增删元素，css仍自动编号；9. 提升可访问性需添加role、aria属性；10. 复杂进度线建议js辅助完成状态标记，最终实现无需手动调整序号、结构简洁且易维护的进度条，完整句。

CSS如何创建多步骤进度条？counter计数器应用

CSS计数器确实是一种非常巧妙且纯粹的CSS方法来构建多步骤进度条，尤其适合那些不需要复杂交互或高度动态变化的场景。它最大的魅力在于，你可以完全脱离JavaScript，仅仅通过HTML结构和CSS规则，就能自动为每个步骤生成序号，这在很多时候能极大地简化开发流程。

解决方案

要使用CSS计数器创建一个多步骤进度条，核心思路是利用

counter-reset

在父元素上初始化一个计数器，然后通过

counter-increment

在每个步骤元素上递增，并用

content: counter()

来显示序号。

以下是一个基本的实现框架：

立即学习“前端免费学习笔记（深入）”；

HTML 结构:

CSS 样式:

.progress-bar {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 40px 0;
    position: relative;
    counter-reset: step; /* 初始化计数器 */
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ddd; /* 进度条底线 */
    transform: translateY(-50%);
    z-index: 0; /* 确保线在步骤后面 */
}

.step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1; /* 确保步骤在进度线前面 */
}

.step .step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step .step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 8px;
    position: relative; /* 用于伪元素定位 */
    counter-increment: step; /* 递增计数器 */
}

.step .step-number::before {
    content: counter(step); /* 显示计数器值 */
}

.step.active .step-number {
    background-color: #007bff; /* 激活步骤的背景色 */
}

.step.active .step-label {
    color: #007bff; /* 激活步骤的文字颜色 */
}

/* 进度条填充线 (可选，但常用) */
.progress-bar .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(50% + 15px); /* 从圆圈右侧开始 */
    right: calc(-50% + 15px); /* 到下一个圆圈左侧结束 */
    height: 2px;
    background-color: #ddd;
    transform: translateY(-50%);
    z-index: -1; /* 确保在步骤之下 */
}

.progress-bar .step.active + .step::before { /* 激活的下一步的线 */
    background-color: #007bff; /* 颜色变化 */
}

/* 假设你希望已完成的步骤线也变色，这需要一些更复杂的CSS选择器或JS辅助 */
/* .progress-bar .step.completed + .step::before { background-color: #007bff; } */
/* 实际上，更常见的是通过JS给已完成的步骤添加一个类，然后用CSS控制 */

这里，

progress-bar

上的

counter-reset: step;

将名为

step

的计数器重置为0。每个

step-number

元素通过

counter-increment: step;

使计数器递增1，然后

content: counter(step);

则将当前计数器的值显示出来。这种方式的妙处在于，你增删任何一个

li.step

，序号都会自动更新，无需手动修改。

为什么选择CSS计数器而不是JavaScript或其他方法？

当我第一次接触到CSS计数器来做进度条时，坦白说，我有点惊讶于它的简洁和纯粹。我们常常习惯于一遇到“计数”、“序号”这类需求就条件反射地去想JavaScript循环，但CSS计数器提供了一个非常优雅的声明式解决方案。

PicWish

推荐！专业的AI抠图修图，支持格式转化

下载

它的主要优势在于：

纯CSS实现，性能开销小： 对于简单的视觉展示，没有JavaScript的参与意味着更快的加载速度和更少的浏览器资源消耗。
语义化HTML： 你可以保持HTML结构干净，只关注内容的组织，而序号的生成完全交给CSS。这对于维护性和可访问性都有好处。
自动编号： 这是最核心的优点。无论你增删多少个步骤，序号都是自动、正确地生成的，省去了手动调整的麻烦，也避免了因人工失误导致的编号错误。
易于维护： 当需求变化，比如需要调整步骤数量时，你只需修改HTML结构，CSS样式无需变动。

当然，它也有局限性。比如，如果你的进度条需要根据用户输入、表单验证结果等动态地改变当前步骤，或者需要复杂的动画效果来指示进度，那么纯CSS计数器就会显得力不从心。这时，JavaScript的介入就变得不可避免了。但即便如此，JS也可以只负责切换

active

类，而序号的生成仍然可以交给CSS计数器来完成，这是一种很好的协作模式。所以，选择它，更多的是看你的项目需求是否匹配它的“轻量级”和“自动化”特点。

如何处理进度条的样式和响应式设计？

进度条的样式，尤其是连接线和活动状态的视觉反馈，是用户体验的关键。我通常会这样做：

1. 连接线： 最直接的方法是利用伪元素。我喜欢在

.progress-bar

容器上设置一个

::before

伪元素作为整个进度条的底线，然后为每个

.step

元素（除了最后一个）设置一个

::after

伪元素来绘制连接线。通过调整

left

和

right

属性，以及

transform: translateY(-50%)

来确保它居中。当一个步骤被激活时，可以通过CSS选择器（如

.step.active + .step::before

）来改变下一段连接线的颜色，模拟进度填充的效果。这种“相邻兄弟选择器”在这里很实用，它能让你在纯CSS下，根据当前激活的步骤来“点亮”后续的连接线。

2. 激活状态： 给当前激活的

.step

添加一个

.active

类，然后通过CSS来改变它的背景色、文字颜色、边框等。我个人偏好让步骤数字的背景色和标签文字的颜色都随之变化，这样视觉上更统一。对于已完成的步骤，你可能还需要一个

.completed

类，让它们呈现出不同的视觉状态，比如一个勾选图标，或者与

active

状态不同的颜色。

3. 响应式设计：

Flexbox布局：
```
display: flex; justify-content: space-between;
```
是水平布局多步骤进度条的黄金组合。它能让所有步骤均匀分布。
小屏幕处理：
- 堆叠： 在小屏幕上，水平空间不足时，将
```
flex-direction
```
  改为
```
column
```
  ，让步骤垂直堆叠。这时，连接线也需要从水平变为垂直。这可能需要一些媒体查询和伪元素的重新定位。
- 溢出滚动： 如果步骤非常多，或者你希望在小屏幕上依然保持水平布局，可以考虑将
```
.progress-bar
```
  包裹在一个带有
```
overflow-x: auto;
```
  的容器中，允许用户水平滚动查看所有步骤。但这通常不是最佳的用户体验，因为它隐藏了部分内容。
- 简化显示： 对于极端情况，可以考虑在小屏幕上只显示当前步骤和总步骤数，或者只显示关键步骤，隐藏不必要的标签文字，只保留数字。

关键在于，要时刻思考用户在不同设备上的体验。我倾向于先设计好桌面端，再用媒体查询逐步向下适配，而不是反过来。

实际应用中可能遇到的挑战及解决方案

在实际项目中使用CSS计数器构建进度条时，确实会遇到一些小麻烦，或者说，需要一些额外的思考来让它更健壮。

1. 动态步骤数量与JavaScript的协作： 尽管CSS计数器本身是纯CSS的，但如果你的步骤数量是动态变化的（例如，根据用户选择不同的产品，订单流程的步骤数也不同），那么HTML结构本身还是需要JavaScript来动态生成或修改的。在这种情况下，CSS计数器依然能发挥作用，因为它能自动处理编号，你只需要JS来增删

元素，而无需关心序号逻辑。这其实是CSS计数器与JS结合的最佳实践之一：各司其职，JS管理DOM结构和数据，CSS负责样式和自动编号。

2. 可访问性（Accessibility）： 一个纯视觉的进度条对屏幕阅读器用户来说可能不那么友好。为了提升可访问性，我通常会建议：

为整个进度条容器添加
```
role="progressbar"
```
和
```
aria-valuenow
```
、
```
aria-valuemin
```
、
```
aria-valuemax
```
属性，指示当前进度。
为每个步骤添加
```
aria-current="step"
```
或
```
aria-label
```
来明确当前步骤的状态和名称。例如：
。
隐藏纯装饰性的伪元素，避免它们被屏幕阅读器误读。

3. 复杂进度线的实现： 上面提到的伪元素连接线方案，在实现“已完成步骤的连接线也变色”时，纯CSS会变得复杂。例如，如果你想让从第一步到当前激活步骤之间的所有连接线都变色，纯CSS可能需要依赖大量的兄弟选择器或