通过自定义 @counter-style 定义符号计数器，可让 <ol> 列表项自动以递增数量的星号（如 *、**、***）作为标记，无需手动编写或 JavaScript 计算。
通过自定义 `@counter-style` 定义符号计数器，可让 `
- ` 列表项自动以递增数量的星号（如 `*`、`**`、`***`）作为标记，无需手动编写或 javascript 计算。
现代 CSS 提供了强大的 @counter-style 规则，支持创建基于符号（symbolic）的自定义计数器。其中 system: symbolic 表示计数器将按顺序重复使用指定符号（如 *），并随序号增长自动叠加：第 1 项显示 *，第 2 项显示 **，第 3 项为 ***，依此类推——完美匹配“递增星号”的需求。
✅ 正确实现方式如下：
@counter-style asterisks {
system: symbolic;
symbols: "*";
suffix: " ";
}
ol.asterisk-list {
list-style: asterisks inside;
padding-inline-start: 0; /* 移除默认缩进，避免与符号错位 */
margin-block-start: 0;
margin-block-end: 0;
}对应 HTML 结构（简洁、语义清晰）：
<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>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- @counter-style 目前在 Chrome 89+、Firefox 86+、Safari 15.4+ 中已稳定支持；旧版浏览器（如 IE 或早期 Safari）不兼容，建议配合降级方案（例如回退为 list-style: none + ::before 伪元素 + counter() 函数，但无法实现真正动态叠加星号）；
- symbols: "*" 仅接受单字符；若需其他符号（如 •、→），可替换为对应字符，但叠加效果仍为线性重复；
- 避免在 <ol> 内混用 type 属性或内联 style="list-style:..."，以免覆盖自定义 counter-style；
- suffix: " " 确保星号后带空格，提升可读性；如需紧贴文字，可设为 suffix: ""。
? 小结：该方案完全声明式、零 JS、响应式扩展——无论列表含 2 项还是 200 项，样式均自动适配。它是语义化 HTML 与现代 CSS 能力结合的典型实践，推荐作为「渐进增强」式列表标注的标准解法。
