如何用 CSS 自定义计数器实现逐项递增的星号列表样式-html教程-PHP中文网

如何用 CSS 自定义计数器实现逐项递增的星号列表样式

通过 @counter-style 定义 symbolic 类型的自定义计数器，可让有序列表（）自动为每一项生成递增数量的星号（如 *, **, ***），无需手动编写或 JavaScript 计算。

通过 `@counter-style` 定义 symbolic 类型的自定义计数器，可让有序列表（`

现代 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>

输出效果：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

* 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、响应任意

数量，是语义清晰且可维护的理想解法。