使用CSS :before实现列表计数器递增失败问题求助

你的代码问题在于没有初始化计数器，直接在li:before中使用counter-increment时，每个列表项的计数器都是独立的，无法实现全局递增效果。只需两步即可修复：

1. 在列表的父容器（<ul>）上初始化计数器
2. 保持伪元素中的计数器递增逻辑

修正后的CSS代码 #

/* 初始化计数器，命名为step-counter，避免通用名称冲突 */
.services__details--content__step>ul {
  counter-reset: step-counter;
  list-style: none; /* 隐藏默认列表符号，可选 */
}

.services__details--content__step>ul>li:before {
  content: counter(step-counter);
  counter-increment: step-counter; /* 每次渲染列表项时递增计数器 */
  color: #0052ff;
  background-color: #e8effe;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border-radius: 50%;
}

额外说明 #

• 给计数器起有意义的名字（比如step-counter），避免和CSS内置属性或通用命名冲突
• 若需要从指定数字开始计数，可在counter-reset中设置初始值，例如counter-reset: step-counter 2;会让第一个列表项显示2
• 添加list-style: none可以隐藏默认的列表项目符号，避免和自定义编号重叠

内容的提问来源于stack exchange，提问作者Sofiane R