如何用 CSS 自定义递增星号列表样式（无需硬编码）-html教程-PHP中文网

如何用 CSS 自定义递增星号列表样式（无需硬编码）

使用 CSS @counter-style 定义 symbolic 计数器，可自动为有序列表每一项生成递增数量的星号（如 *、**、***），完全无需手动添加或 JavaScript 计算。

使用 css `@counter-style` 定义 symbolic 计数器，可自动为有序列表每一项生成递增数量的星号（如 `*`、`**`、`***`），完全无需手动添加或 javascript 计算。

在构建营销文案、条款说明或强调性列表时，常需用递增星号（* → ** → ***）直观表达层级或紧迫性。传统做法是硬编码 HTML 内容（如

** ...

），但难以维护且违背语义化原则。现代 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 保持简洁语义化：

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

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

下载

<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 干净、语义正确、响应式友好，是现代前端实践中的推荐模式。