CSS如何创建步骤进度条？counter计数器-css教程-PHP中文网

使用css计数器创建步骤进度条需三步：1. 在父元素用counter-reset初始化计数器；2. 在每个步骤元素上用counter-increment递增计数；3. 通过::before伪元素的content: counter()显示序号，并结合flexbox布局、伪元素连接线及类名控制完成/活跃状态样式，最后通过css变量和响应式设计优化可维护性与兼容性，该方法语义清晰、无需javascript、性能高效且易于维护。

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

在CSS中创建步骤进度条，尤其是那些带有数字标记的，

counter

登录后复制

计数器是一个非常优雅且高效的解决方案。它允许我们纯粹通过CSS来管理和显示序列号，而无需在HTML中手动添加数字或依赖JavaScript来动态生成。这不仅保持了HTML的语义化，也让样式和内容的耦合度更低，维护起来更加轻松。

解决方案

要使用CSS计数器创建一个基本的步骤进度条，核心思想是利用

counter-reset

登录后复制

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

counter-increment

登录后复制

在每个步骤元素上递增它，最后用

content: counter()

登录后复制

在伪元素中显示计数。

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

HTML 结构:

一个简单的无序列表或有序列表就能很好地承载步骤：

<ul class="progress-steps">
    <li class="step completed">步骤一：开始</li>
    <li class="step active">步骤二：进行中</li>
    <li class="step">步骤三：待处理</li>
    <li class="step">步骤四：完成</li>
</ul>

登录后复制

CSS 样式:

.progress-steps {
    display: flex; /* 使用Flexbox布局步骤 */
    justify-content: space-between;
    list-style: none; /* 移除默认列表样式 */
    padding: 0;
    margin: 20px 0;
    position: relative; /* 为连接线定位提供上下文 */
    counter-reset: step-counter; /* 初始化一个名为 'step-counter' 的计数器 */
}

.step {
    flex: 1; /* 每个步骤占据等宽空间 */
    text-align: center;
    position: relative;
    padding-top: 40px; /* 为数字留出空间 */
    color: #555;
    font-size: 14px;
    counter-increment: step-counter; /* 递增计数器 */
}

/* 步骤数字的样式 */
.step::before {
    content: counter(step-counter); /* 显示计数器值 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #ccc;
    color: white;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    z-index: 1; /* 确保数字在连接线上方 */
}

/* 步骤连接线的样式 */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px; /* 与数字中心对齐 */
    left: 50%;
    width: 100%; /* 线条宽度 */
    height: 2px;
    background-color: #ccc;
    z-index: 0; /* 确保线条在数字下方 */
    transform: translateX(0); /* 默认从当前步骤中心开始 */
}

/* 活跃/完成状态的样式 */
.step.completed::before {
    background-color: #28a745; /* 完成的步骤显示绿色 */
}

.step.active::before {
    background-color: #007bff; /* 活跃的步骤显示蓝色 */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* 增加视觉强调 */
}

/* 已经完成的步骤，其后的连接线也应该变色 */
.step.completed + .step::after,
.step.active::after {
    background-color: #28a745; /* 假设活跃和完成的线都变色 */
}

/* 修正最后一个步骤的线条，它不应该有after伪元素 */
.progress-steps .step:last-child::after {
    display: none;
}

/* 针对已经完成的步骤，其前面的线条应该也是完成状态的颜色 */
/* 这是一个常见的挑战，通常需要更复杂的选择器或JS辅助。
   这里我们尝试通过相邻兄弟选择器来模拟部分效果，
   但要实现从起点到当前活跃点的完整进度线，纯CSS有时会受限。
   更可靠的做法是让父元素背景渐变或使用JS动态调整线的宽度/颜色。
*/
.step.completed + .step::before {
    /* 确保完成的下一步的数字背景色也正确 */
    /* 实际上这里不需要改变，因为每个步骤的::before是独立的 */
}

登录后复制

为什么选择CSS计数器而不是其他方法？它的优势体现在哪里？

说实话，我看到过太多开发者为了实现一个简单的步骤进度条，要么在每个列表项里手动写上“1”、“2”、“3”，要么就急匆匆地引入JavaScript，动态去生成这些数字。但讲真，对于这种本身就带有序列属性的UI组件，CSS计数器简直是天作之合，它提供了一种非常“纯粹”的解决方案。

它的优势体现在几个方面：

语义化与简洁性： 这是我最看重的一点。你的HTML可以保持非常干净，比如
```
<li class="step">我的步骤内容</li>
```
登录后复制
。你不需要为了显示数字而添加额外的
```
<span>
```
登录后复制
或
```
<div>
```
登录后复制
，也不需要
```
data-step="1"
```
登录后复制
这样的自定义属性来标记顺序。数字完全由CSS在视觉层面上生成，这极大地提升了代码的可读性和维护性。
自动化与动态性： 想象一下，如果你的步骤是动态加载的，或者用户在某个阶段可以添加/删除步骤。使用CSS计数器，你只需要增删HTML中的
```
<li>
```
登录后复制
元素，数字就会自动更新，无需任何JavaScript介入。这简直是懒人福音，也大大降低了出错的概率。
性能优势： 纯CSS的实现意味着没有JavaScript的解析和执行开销。对于大型应用或性能敏感的页面来说，这一点虽然微小，但积少成多，能减少浏览器的工作负担。
样式灵活性： 你可以非常灵活地控制计数器的样式，比如字体、颜色、背景、边框，甚至可以利用它实现一些非常规的图形效果。因为它是通过伪元素实现的，所以可以独立于步骤内容进行定位和造型。

总的来说，CSS计数器提供了一种声明式、自动化、高性能且高度可定制的方式来处理有序列表的编号，对于步骤进度条这种场景，它无疑是首选。

创客贴设计

创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

查看详情

如何为进度条添加视觉上的“完成”状态和连接线？

一个进度条，它的核心价值在于“进度”二字。仅仅有数字是远远不够的，我们还需要视觉上的反馈来告诉用户：哪些步骤已经完成？当前进行到哪一步了？以及步骤之间是如何连接的？这涉及到对步骤本身和连接线的状态管理。

1. 状态管理：

通常，我们会通过给

<li>

登录后复制

元素添加不同的类名来表示其状态，比如

completed

登录后复制

（已完成）、

active

登录后复制

（当前活跃）和

pending

登录后复制

（待处理，通常是默认状态）。

已完成的步骤： 我们可以让
```
li.completed::before
```
登录后复制
伪元素（也就是数字本身）的背景色变成绿色，或者显示一个勾选图标。
当前活跃的步骤：
```
li.active::before
```
登录后复制
可以是蓝色，或者通过增加边框、放大尺寸等方式使其更加突出，吸引用户注意力。

2. 连接线：

这是实现进度条视觉效果中稍微复杂一点的部分，但CSS同样可以搞定。

基本连接线： 最常见的方法是利用每个
```
<li>
```
登录后复制
的
```
::after
```
登录后复制
伪元素来创建线条。将这个伪元素定位在
```
<li>
```
登录后复制
的右侧，并使其宽度覆盖到下一个
```
<li>
```
登录后复制
的中心。
- 需要注意的是，最后一个
```
<li>
```
  登录后复制
  不需要连接线，所以可以通过
```
:not(:last-child)
```
  登录后复制
  选择器来排除它。
- 线的定位通常需要
```
position: absolute;
```
  登录后复制
  和
```
top
```
  登录后复制
  /
```
left
```
  登录后复制
  属性配合，确保它位于数字的下方（通过
```
z-index
```
  登录后复制
  控制）。
进度线（已完成部分变色）： 这是挑战所在。我们希望线段也随着步骤的完成而变色。
- 一种思路是，让
```
li.completed::after
```
  登录后复制
  的背景色变成已完成的颜色（比如绿色）。
- 更进一步，要让“当前活跃”步骤之前的线段也变色，我们可以利用CSS的兄弟选择器。例如，
```
li.completed + li::after
```
  登录后复制
  可以选中紧跟在已完成步骤后面的那个步骤的
```
::after
```
  登录后复制
  伪元素，然后将其颜色也变为完成色。
- 然而，要实现从进度条起点到当前活跃步骤的整条线段都变色，纯CSS在某些复杂布局下会显得力不从心。因为CSS的兄弟选择器只能影响“后面”的元素。在这种情况下，一种更通用的做法是：
  - 让父元素有一个背景色，或者一条默认颜色的线。
  - 通过JavaScript动态计算当前活跃步骤的宽度或位置，然后用一个绝对定位的
```
div
```
    登录后复制
    或伪元素覆盖在默认线上方，并调整其宽度和背景色来模拟进度。
  - 或者，如果布局允许，可以考虑在父元素上使用
```
linear-gradient
```
    登录后复制
    来模拟进度，然后通过修改CSS变量来动态调整渐变停止点，但这通常需要更精巧的布局设计。

我个人在项目中，如果线的进度效果要求很高，并且步骤数量动态性强，往往会稍微借助JavaScript来计算并设置一个CSS自定义属性（CSS Variable），比如

--progress-width

登录后复制

，然后让线条的宽度或渐变终点依赖这个变量。这提供了一种很好的平衡，既利用了CSS的强大渲染能力，又解决了纯CSS在处理“之前”状态时的局限性。

在实际项目中，使用CSS计数器构建进度条有哪些常见挑战和优化技巧？

虽然CSS计数器在构建进度条时非常强大，但在实际项目中，你可能会遇到一些小麻烦，或者需要一些额外的技巧来让它表现得更好。这就像是，你学会了骑自行车，但要骑得又快又稳，还得知道怎么避坑和调速。

常见挑战：

响应式布局与线条连接： 当屏幕尺寸变化时，步骤之间的间距可能会改变，这会导致连接线看起来不自然，或者无法精确连接到下一个步骤的中心。特别是当步骤文字很长，导致换行时，线条的垂直定位就更麻烦了。
垂直进度条的适配： 默认我们可能习惯做水平进度条。但如果需求是垂直的，你需要重新调整Flexbox的方向 (
```
flex-direction: column;
```
登录后复制
)，并重新思考伪元素的定位（
```
left
```
登录后复制
变成
```
top
```
登录后复制
，
```
width
```
登录后复制
变成
```
height
```
登录后复制
等）。这不仅仅是简单的属性值切换，有时候需要对定位逻辑做一番调整。
复杂线条样式： 如果进度条的连接线需要是虚线、箭头，或者更复杂的图形，纯CSS的
```
::after
```
登录后复制
伪元素可能就不够用了。你可能需要考虑使用SVG来绘制这些复杂的线条，然后通过CSS来控制SVG的可见性和颜色。
动态步骤的复杂性： 尽管计数器本身能自动编号，但如果步骤是高度动态的（比如用户可以随意拖拽排序、实时增删），并且你对连接线的“进度”视觉效果有很高要求（例如，线段要精确地从已完成步骤的中心延伸到当前活跃步骤的中心），那么纯CSS可能无法完美实现。你可能需要JavaScript来监听DOM变化，然后重新计算并设置一些CSS变量来调整线条的宽度或背景。
辅助功能（Accessibility）： 视觉上的进度条对于普通用户很直观，但对于使用屏幕阅读器的用户来说，他们可能无法感知到这种视觉进度。

优化技巧：

Flexbox 或 Grid 布局： 对于步骤的排列，强烈推荐使用Flexbox。它能非常方便地控制步骤的间距、对齐方式以及在不同屏幕尺寸下的自适应行为。对于更复杂的网格布局，Grid也是个不错的选择。
CSS 自定义属性（CSS Variables）： 这是一个神器。你可以把颜色、间距、线条粗细等可变值定义为CSS变量。这样，当你需要改变进度条的主题色或者在不同状态下切换颜色时，只需要修改一个变量的值，就能全局生效。这对于维护大型项目和实现主题切换非常有帮助。
```
.progress-steps {
    --completed-color: #28a745;
    --active-color: #007bff;
    --default-color: #ccc;
    /* ... */
}
.step.completed::before, .step.completed + .step::after {
    background-color: var(--completed-color);
}
/* ... */
```
登录后复制
精确的
calc()
登录后复制
函数：在定位线条或调整元素大小时，
```
calc()
```
登录后复制
函数能让你进行数学计算。比如，
```
width: calc(100% - 30px);
```
登录后复制
可以让线条的宽度根据总宽度动态调整，并减去数字圆圈的宽度，从而实现更精确的连接。
无障碍性考量： 即使是视觉组件，也应该考虑无障碍性。在当前活跃的
```
<li>
```
登录后复制
上添加
```
aria-current="step"
```
登录后复制
属性，能帮助屏幕阅读器用户理解当前所处的流程阶段。同时，确保步骤内容的文本清晰明了，即使没有视觉进度条也能理解。
渐进增强（Progressive Enhancement）： 先用CSS计数器实现一个基础的、功能完善的进度条。如果后续有更复杂、更动态的视觉需求，再考虑引入少量JavaScript来增强效果，而不是一开始就过度依赖JS。