如何使用CSS伪元素::marker来定制列表项序号的样式？

本文共计1041个文字，预计阅读时间需要5分钟。

直接说结论：

常见错误现象：ul li::marker { color: red; } 写了但没生效？大概率是因为父元素用了 display: flex 或 display: grid，或者 li 被设了 display: contents —— 这些都会让伪元素失去宿主。

• ::marker 只作用于生成项目符号的元素，即 li、dt 等自带标记行为的标签，不适用于 div 模拟列表
• 它不能修改序号内容（如把数字换成 “Step 1”），只能修饰已生成的标记；要改内容得用 counter-reset + counter-increment + content
• 不支持所有 CSS 属性：能用的只有 color、font 相关属性、content、text-align（部分浏览器）、white-space 等有限几个

::marker 配合 content 自定义序号文字

想把有序列表的 1. 换成 ▶ 1 或 [1]？::marker 的 content 属性可以做到，但要注意：它不会继承 li 的 content，也不影响计数逻辑。

示例：

立即学习“前端免费学习笔记（深入）”；

ol.custom li::marker { content: "[" counter(list-item) "]"; color: #3a7ebf; font-weight: 600; }

关键点：

• counter(list-item) 是默认计数器名，和 ol 的 type 属性无关；若用了 counter-reset 自定义计数器，就得写对应名字，比如 counter(step)
• content 里不能用 attr() 或函数式值；字符串拼接只能靠空格和引号内的字面量
• Safari 对 content 中嵌套 counter() 的支持稍慢，建议加 list-style: none 到 li 并确保 ol 有 counter-reset 显式声明

用 ::marker 实现图标 + 数字混合序号

设计师给的 UI 要求是「圆点图标 + 右侧数字」，但 list-style-image 只能替换整个标记，无法分层控制。这时 ::marker 就派上用场了——它允许你把图标当背景，数字当内容，各自独立控制。

实操建议：

• 先禁用原生标记：ol { list-style: none; }，再用 counter 手动触发计数
• 给 li::marker 设 content: counter(item);，同时用 background + padding-left 撑出图标位置（注意：::marker 本身不支持 background，得退回到 li 上做）
• 更稳妥的做法是放弃 ::marker，改用 li::before + counter，因为 ::before 支持全部样式，且兼容性更好
• 真要用 ::marker 加图标，目前唯一可行的是用 content: "● " counter(item); 拼接 Unicode 符号——简单、跨浏览器、无额外请求

移动端 Safari 和旧版 Firefox 的兼容性断层

::marker 在 iOS 15.4 之前、Android WebView（基于旧 Chromium）以及 Firefox

这意味着：

• 如果你的项目需支持 iOS 14 或微信内置浏览器（多数仍为 X5 内核），::marker 应视为“实验性特性”，必须提供降级方案
• 降级不等于回退到 list-style-type，而是用 li::before { content: ... } 模拟，并通过 @supports (selector(::marker)) 做条件覆盖
• 不要在 ::marker 里写关键布局逻辑（比如靠它撑开行高或对齐），否则降级后整个列表会塌陷或错位

最常被忽略的一点：CSS 计数器本身没问题，但 ::marker 的 content 若引用了未声明的计数器，部分浏览器会静默失败，不报错也不渲染——务必检查 counter-reset 是否写在正确祖先上。