CSS Counters在Bootstrap列表中自动生成序号的方法

先看一个典型的场景：封装一个带序号的 Bootstrap 列表组件，却发现每个 .list-group-item 前都顶着一个“1.”，无论怎么改都不行。原因很简单——核心问题出在 counter-reset 的放置位置上。

为什么 counter-reset 要放在 .list-group 上而不是 .list-group-item

遇到的坑是这样的：CSS 计数器的作用域由 counter-reset 所在元素定义，它重置的是该元素的后代上下文。如果贪图省事，把 counter-reset: item; 直接写在每个 .list-group-item 上，那每个条目都会把自己的计数器重置成 1，结果就是每个序号都变成“1.”。必须让整个列表容器（也就是 .list-group）统一管理计数器，才能实现递增——这才是真正保持连续的关键。

具体怎么操作？有几点需要特别注意：

• .list-group { counter-reset: item; } 是必要的前提条件
• Bootstrap 5+ 的 .list-group 默认是 display: block，兼容计数器；但如果自定义改过 display（比如设成了 flex），就得确认仍支持伪元素生成内容
• 注意千万别在 .list-group 上同时用 counter-increment——它只应该出现在要显示序号的子元素上

如何让序号紧贴文字、不破坏 Bootstrap 的默认 padding 和对齐

直接在 .list-group-item::before 插入序号，结果往往是文字整体右移，和原生样式错位，看着特别别扭。解决办法是利用绝对定位配合左侧留白，复用 Bootstrap 的 padding-left 逻辑。

具体做法是这样的：

• 给 .list-group-item 设置 position: relative;
• 用 .list-group-item::before 绝对定位到左侧，宽度固定（比如 width: 2em;），并设置 text-align: right;
• 通过 padding-left: 2.5em; 把内容往右推，腾出序号空间——这个值要略大于 ::before 宽度，防止重叠
• 序号后加 "." 用 content: counter(item) ".";，比拼字符串更可靠

遇到嵌套列表或混合类型（带链接/按钮的 item）时序号失效怎么办

当 .list-group-item 内部包含 a、button 或其他交互元素，并且你对这些子元素尝试用 ::before，序号就会乱作一团：要么重复出现，要么被覆盖。根本原因是计数器递增必须绑定到实际渲染的块级容器上。

经验总结：

• 始终对 .list-group-item（而非其子元素）应用 counter-increment: item;
• 如果 item 内有 ，不要给 a::before 加序号——它会继承父级计数器值，但不会触发递增
• 需要悬停高亮时，用 .list-group-item:hover::before 控制颜色，别碰 counter-increment
• 嵌套列表（比如二级 .list-group）需要单独命名计数器，例如 counter-reset: subitem;，避免和外层冲突