::before 中 counter() 不显示数字是因为计数器未初始化，必须用 counter-reset 或 counter-increment 创建计数器，且值只能为整数或无单位数字，否则返回空白或 nan。
为什么 ::before 里用 counter() 没反应？
直接在 ::before 中写 content: counter(my-counter); 却不显示数字，大概率是计数器根本没被初始化。CSS 计数器不是声明即生效的变量，它必须先用 counter-reset（在父容器上）或 counter-increment（在目标元素上）触发创建和累加，否则 counter() 查无此计数器。
常见错误写法：li::before { content: counter(item); } —— 缺少 counter-reset: item; 或 counter-increment: item;
- 计数器名区分大小写，
item和Item是两个不同计数器 -
counter-reset必须作用于列表容器（如ol、ul或div），不能只加在li上 - 如果列表嵌套，需注意
counter-reset的作用域是否被子级重置覆盖
如何让 ul 列表也支持自定义数字前缀？
默认只有 ol 自带计数逻辑，但 ul 完全可以手动接管：给 ul 加 counter-reset，再给每个 li 加 counter-increment，最后在 li::before 中读取。
示例（从 100 开始递增）：
ul {
counter-reset: custom-counter 99;
}
ul li {
counter-increment: custom-counter;
}
ul li::before {
content: counter(custom-counter) ". ";
margin-right: 0.5em;
}
-
counter-reset: custom-counter 99表示初始值设为 99，第一个li的counter-increment会使其变为 100 - 若想跳过某些
li（比如禁用项），可对它们单独设置counter-increment: none - 注意不要在
li::before里同时写counter-increment—— 这会导致每次渲染都累加，数字错乱
counter() 和 counters() 的区别在哪？
单层列表用 counter() 就够了；多级嵌套（比如 ul > li > ul > li）要显示 “1.1”、“1.2.3” 这类格式，必须用 counters()。
关键差异：counter(section) 只取当前层级的计数值counters(section, ".") 会沿祖先链向上拼接所有同名计数器，用 "." 连接
- 嵌套时，每层
ul都要独立counter-reset: section，否则子级无法生成自己的序列 -
counters()第二个参数是分隔符，可以是"-"、""（空字符串）、甚至"→" - 性能上无明显差异，但
counters()依赖 DOM 层级结构，如果用display: contents破坏了树形关系，可能失效
为什么计数器在伪元素中显示 NaN 或空白？
最常踩的坑是：在 counter-increment 值里混入非数字单位，比如 counter-increment: step 1px。CSS 计数器只接受整数或无单位数字，1px、"2"（带引号）、1.5（小数）都会导致计数器无效，后续 counter() 返回空或 NaN。
- 合法写法：
counter-increment: level 1、counter-increment: level（默认 +1） - 非法写法：
counter-increment: level "1"、counter-increment: level 1rem、counter-increment: level 1.2 - 调试技巧：临时给
li::before加background: pink，确认伪元素是否渲染成功；再检查开发者工具中该元素是否计算出counter()值
content 都不会出数字。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
