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

使用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()

在伪元素中显示计数。

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

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计数器简直是天作之合，它提供了一种非常“纯粹”的解决方案。

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

<li> 语义化与简洁性： 这是我最看重的一点。你的HTML可以保持非常干净，比如

<li class="step">我的步骤内容</li>

。你不需要为了显示数字而添加额外的

<span>

或

<div>

，也不需要

data-step="1"

这样的自定义属性来标记顺序。数字完全由CSS在视觉层面上生成，这极大地提升了代码的可读性和维护性。

<li> 自动化与动态性： 想象一下，如果你的步骤是动态加载的，或者用户在某个阶段可以添加/删除步骤。使用CSS计数器，你只需要增删HTML中的

<li>

元素，数字就会自动更新，无需任何JavaScript介入。这简直是懒人福音，也大大降低了出错的概率。

<li> 性能优势： 纯CSS的实现意味着没有JavaScript的解析和执行开销。对于大型应用或性能敏感的页面来说，这一点虽然微小，但积少成多，能减少浏览器的工作负担。

<li> 样式灵活性： 你可以非常灵活地控制计数器的样式，比如字体、颜色、背景、边框，甚至可以利用它实现一些非常规的图形效果。因为它是通过伪元素实现的，所以可以独立于步骤内容进行定位和造型。

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

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

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

1. 状态管理：

通常，我们会通过给

<li>

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

completed

（已完成）、

active

（当前活跃）和

pending

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

<li> 已完成的步骤： 我们可以让

li.completed::before

伪元素（也就是数字本身）的背景色变成绿色，或者显示一个勾选图标。

<li> 当前活跃的步骤：

li.active::before

可以是蓝色，或者通过增加边框、放大尺寸等方式使其更加突出，吸引用户注意力。

2. 连接线：

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

<li> 基本连接线： 最常见的方法是利用每个

<li>

的

::after

伪元素来创建线条。将这个伪元素定位在

<li>

的右侧，并使其宽度覆盖到下一个

<li>

的中心。

<li>需要注意的是，最后一个

<li>

不需要连接线，所以可以通过

:not(:last-child)

选择器来排除它。

<li>线的定位通常需要

position: absolute;

和

top

/

left

属性配合，确保它位于数字的下方（通过

z-index

控制）。

<li> 进度线（已完成部分变色）： 这是挑战所在。我们希望线段也随着步骤的完成而变色。

<li>一种思路是，让

li.completed::after

的背景色变成已完成的颜色（比如绿色）。

<li>更进一步，要让“当前活跃”步骤之前的线段也变色，我们可以利用CSS的兄弟选择器。例如，

li.completed + li::after

可以选中紧跟在已完成步骤后面的那个步骤的

::after

伪元素，然后将其颜色也变为完成色。

<li>然而，要实现从进度条起点到当前活跃步骤的整条线段都变色，纯CSS在某些复杂布局下会显得力不从心。因为CSS的兄弟选择器只能影响“后面”的元素。在这种情况下，一种更通用的做法是：

<li>让父元素有一个背景色，或者一条默认颜色的线。

<li>通过JavaScript动态计算当前活跃步骤的宽度或位置，然后用一个绝对定位的

div

或伪元素覆盖在默认线上方，并调整其宽度和背景色来模拟进度。

<li>或者，如果布局允许，可以考虑在父元素上使用

linear-gradient

来模拟进度，然后通过修改CSS变量来动态调整渐变停止点，但这通常需要更精巧的布局设计。

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

--progress-width

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

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

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

常见挑战：

<li> 响应式布局与线条连接： 当屏幕尺寸变化时，步骤之间的间距可能会改变，这会导致连接线看起来不自然，或者无法精确连接到下一个步骤的中心。特别是当步骤文字很长，导致换行时，线条的垂直定位就更麻烦了。

<li> 垂直进度条的适配： 默认我们可能习惯做水平进度条。但如果需求是垂直的，你需要重新调整Flexbox的方向 (

flex-direction: column;

)，并重新思考伪元素的定位（

left

变成

top

，

width

变成

height

等）。这不仅仅是简单的属性值切换，有时候需要对定位逻辑做一番调整。

<li> 复杂线条样式： 如果进度条的连接线需要是虚线、箭头，或者更复杂的图形，纯CSS的

::after

伪元素可能就不够用了。你可能需要考虑使用SVG来绘制这些复杂的线条，然后通过CSS来控制SVG的可见性和颜色。

<li> 动态步骤的复杂性： 尽管计数器本身能自动编号，但如果步骤是高度动态的（比如用户可以随意拖拽排序、实时增删），并且你对连接线的“进度”视觉效果有很高要求（例如，线段要精确地从已完成步骤的中心延伸到当前活跃步骤的中心），那么纯CSS可能无法完美实现。你可能需要JavaScript来监听DOM变化，然后重新计算并设置一些CSS变量来调整线条的宽度或背景。

<li> 辅助功能（Accessibility）： 视觉上的进度条对于普通用户很直观，但对于使用屏幕阅读器的用户来说，他们可能无法感知到这种视觉进度。

优化技巧：

<li> Flexbox 或 Grid 布局： 对于步骤的排列，强烈推荐使用Flexbox。它能非常方便地控制步骤的间距、对齐方式以及在不同屏幕尺寸下的自适应行为。对于更复杂的网格布局，Grid也是个不错的选择。

<li> 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); } /* ... */

<li> 精确的

calc()

函数： 在定位线条或调整元素大小时，

calc()

函数能让你进行数学计算。比如，

width: calc(100% - 30px);

可以让线条的宽度根据总宽度动态调整，并减去数字圆圈的宽度，从而实现更精确的连接。

<li> 无障碍性考量： 即使是视觉组件，也应该考虑无障碍性。在当前活跃的

<li>

上添加

aria-current="step"

属性，能帮助屏幕阅读器用户理解当前所处的流程阶段。同时，确保步骤内容的文本清晰明了，即使没有视觉进度条也能理解。

<li> 渐进增强（Progressive Enhancement）： 先用CSS计数器实现一个基础的、功能完善的进度条。如果后续有更复杂、更动态的视觉需求，再考虑引入少量JavaScript来增强效果，而不是一开始就过度依赖JS。

总而言之，CSS计数器是一个非常实用的工具，它鼓励我们用更“CSS化”的思维去解决问题。面对挑战时，不妨多思考一下CSS的各种特性，比如Flexbox、伪元素、自定义属性，它们往往能提供比你想象中更强大的解决方案。