使用 CSS @counter-style 定义 symbolic 计数器，可自动为有序列表每一项生成递增数量的星号（如 *、**、***），完全无需手动添加或 JavaScript 计算。
使用 css `@counter-style` 定义 symbolic 计数器，可自动为有序列表每一项生成递增数量的星号（如 `*`、`**`、`***`），完全无需手动添加或 javascript 计算。
在构建营销文案、条款说明或强调性列表时，常需用递增星号（* → ** → ***）直观表达层级或紧迫性。传统做法是硬编码 HTML 内容（如 <li>** ...</li>），但难以维护且违背语义化原则。现代 CSS 提供了优雅解法：通过 @counter-style 自定义计数器行为。
核心方案是定义一个 symbolic 类型的计数器，仅使用 * 作为基础符号，CSS 会自动按列表项序号重复该符号：
@counter-style asterisks {
system: symbolic;
symbols: "*";
suffix: " ";
}
ol.asterisk-list {
list-style: asterisks inside;
padding-inline-start: 0; /* 清除默认缩进，保持对齐整洁 */
margin: 1rem 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>
✅ 效果：
立即学习“前端免费学习笔记（深入）”；
- 第 1 项 → *
- 第 2 项 → **
- 第 3 项 → ***
- 依此类推，支持任意长度列表，完全动态生成。
⚠️ 注意事项：
- @counter-style 已被 Chrome 85+、Firefox 86+、Safari 17.4+ 原生支持（CanIUse 数据），旧版浏览器需降级为 list-style: none + ::before 伪元素模拟（不推荐，丧失语义与可访问性）；
- system: symbolic 是关键——它启用「符号重复」逻辑（区别于 cyclic 或 numeric），symbols 中只写一个 * 即可触发倍增；
- suffix: " " 确保星号后带空格，提升可读性；若需紧贴文字，可设为 suffix: ""；
- 避免在 ol 上同时设置 type 属性（如 type="1"），以免覆盖自定义计数器。
总结：借助标准 CSS 计数器能力，既能实现视觉上逐级强化的星号列表，又保持 HTML 干净、语义正确、响应式友好，是现代前端实践中的推荐模式。
