通过 @counter-style 定义 symbolic 类型的自定义计数器，可让有序列表（<ol>）自动为每一项生成递增数量的星号（如 *, **, ***），无需手动编写或 JavaScript 计算。
通过 `@counter-style` 定义 symbolic 类型的自定义计数器，可让有序列表（`
- `）自动为每一项生成递增数量的星号（如 `*`, `**`, `***`），无需手动编写或 javascript 计算。
现代 CSS 提供了强大的 @counter-style 规则，使我们能脱离传统数字或字母编号，灵活创建符号化、递增式的列表标记。针对“每项星号数量随序号递增”的需求，推荐使用 system: symbolic —— 它会将指定符号按计数器值重复渲染（第 1 项显示 1 次 *，第 2 项显示 2 次，依此类推）。
✅ 正确实现方式如下：
@counter-style asterisks {
system: symbolic;
symbols: "*";
suffix: " ";
}
ol.asterisk-list {
list-style: asterisks inside;
padding-inline-start: 0; /* 重置默认缩进，避免与 symbol 冲突 */
}<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>
输出效果：
* Only available for the first 12 months ** Only available for new customers signing up for a paid plan *** Item 3 **** Item 4 ***** Item 5
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- @counter-style 在所有现代浏览器中已广泛支持（Chrome 99+、Firefox 103+、Safari 16.4+），但不兼容 IE 及旧版 Safari；如需兼容，建议降级为 list-style: none + ::before 伪元素配合 content: counter(...) 手动模拟（但无法真正动态重复符号）。
- symbols 必须为单字符（如 "*" 或 "•"），不支持多字符字符串；若需 ••、••• 等效果，仍可用 symbolic，但需确保符号本身是单一 Unicode 字符。
- suffix: " " 添加空格分隔符，提升可读性；也可改为 suffix: "" 或 suffix: " "（细空格）以精细控制间距。
该方案完全声明式、零 JS、响应任意 <li> 数量，是语义清晰且可维护的理想解法。
