通过 @counter-style 定义 symbolic 计数器，可让有序列表 <ol> 自动为每一项生成递增数量的星号（如 *, **, ***），无需手动编写或 JavaScript 计算。
通过 `@counter-style` 定义 symbolic 计数器，可让有序列表 `
- ` 自动为每一项生成递增数量的星号（如 `*`, `**`, `***`），无需手动编写或 javascript 计算。
现代 CSS 提供了强大的自定义计数器能力，其中 @counter-style 规则支持 symbolic 系统，专为重复符号（如 *、•、+）设计，并能随列表项序号自动叠加。以下是最简可行方案：
@counter-style asterisks {
system: symbolic;
symbols: "*";
suffix: " ";
}
ol.asterisk-list {
list-style: asterisks inside;
padding-inline-start: 0; /* 清除默认缩进，使对齐更可控 */
margin: 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>
渲染效果将依次显示：
* Only available for the first 12 months
** Only available for new customers signing up for a paid plan
*** Item 3
**** Item 4
***** Item 5
✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- 完全声明式：CSS 控制样式逻辑，HTML 保持语义纯净；
- 动态扩展：无论新增多少 <li>，星号数量均自动匹配其序号；
- 兼容性注意：目前主流浏览器（Chrome 119+、Firefox 117+、Safari 17.4+）已原生支持 @counter-style，旧版 Safari 需加 -webkit- 前缀（但 symbolic 支持有限，建议降级为 list-style-type: none + 伪元素模拟作为备选）；
- 可拓展性强：只需修改 symbols 值（如 "●" 或 "→"），即可切换为其他重复符号。
⚠️ 注意事项：
- system: symbolic 仅适用于单一字符重复，不支持多字符组合（如 "**"）；若需双星号起步，可通过 counter-reset: list-item -1 调整起始值，但需谨慎测试；
- 避免与 ol 默认 reversed 或 start 属性混用，以免计数逻辑冲突；
- 若需兼容 IE 或较老移动端，推荐使用 ::before + counter() 的 fallback 方案（需配合 counter-increment 手动管理）。
总之，@counter-style 是实现“动态符号列表”的标准、优雅且可维护的解决方案。
