通过 @counter-style 定义 symbolic 类型计数器，可让有序列表（）自动为每一项生成递增数量的星号（如 *、**、***），无需手动编写或 JavaScript 计算。
通过 `@counter-style` 定义 symbolic 类型计数器，可让有序列表（`
- `）自动为每一项生成递增数量的星号（如 `*`、`**`、`***`），无需手动编写或 JavaScript 计算。
现代 CSS 提供了强大的自定义计数器能力，其中 @counter-style 规则支持 symbolic 系统，专为重复符号（如星号、圆点、加号）设计。它会根据列表项序号自动重复指定符号：第 1 项输出 *，第 2 项输出 **，依此类推，完美匹配“逐行增加星号”的需求。
✅ 正确用法如下：
@counter-style asterisks {
system: symbolic;
symbols: "*";
suffix: " ";
}
ol.asterisk-list {
list-style: asterisks inside;
padding-inline-start: 0; /* 重置默认缩进，避免与 symbol 冲突 */
margin: 0;
}
<ol class="asterisk-list"> <li>Only available for the first 12 months</li> <li>Only available for new customers signing up for a paid plan</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ol>
⚠️ 注意事项：
- symbolic 系统仅支持单字符符号（如 "*"、"•"、"+"），不支持多字符字符串（如 "**" 或 "→"）；
- 浏览器兼容性良好（Chrome 99+、Firefox 110+、Safari 17+），旧版 Safari 需加 -webkit- 前缀（但当前已基本无需）；
- 不要混用 list-style: none + 手动插入 *——这违背语义且无法自动扩展；
- 若需左侧对齐星号（如 * text 而非 * text 带额外空格），可将 suffix: " " 改为 suffix: "" 并在 HTML 中保留空格，或通过 ::marker { margin-right: 0.25em; } 精细控制间距。
该方案真正实现了“声明式递增”——无论列表动态增删多少项，样式层全自动适配，语义清晰、维护成本低，是现代 CSS 解决此类问题的标准实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
