做列表样式这件事CSS 一直都很尴尬。以前想把li前面的那个圆点换成自定义图形不是用list-style-image加载一张图片就是用li::before模拟一个符号再搭配定位把符号挪到内容外面。麻烦不说复制文本、屏幕阅读器读取、换行对齐这些细节总会在某个地方出问题。所以当你第一次知道存在::marker这个伪元素的时候第一反应应该是为什么不早一点知道。::marker是一个直接作用于列表项标记盒子的伪元素它允许你控制ul、ol以及任何display: list-item元素前面那个标记的颜色、字体、字号、文本样式甚至直接替换标记内容。这篇文章写给所有和列表样式较过劲的前端开发、需要处理文档结构的产品同学以及好奇浏览器内部如何渲染列表的人。我会从为什么需要它、支持什么属性、怎么实战、有哪些坑以及如何安全降级这几个角度把::marker讲透。所有代码都基于现代浏览器实测过少数不兼容点我会明确标出。1. 列表标记样式化的历史痛点为什么等了这么多年才有 ::marker1.1 传统方案的三大局限在::marker出现之前前端处理列表标记基本只有三条路。第一条路是用list-style-type选择系统内置的几种标记实心圆点、空心圆点、方点、十进制数字、小写罗马数字等等。问题显而易见——这些标记的样式完全由浏览器决定你想让圆点变成红色list-style没有这个能力。你想让数字从 1 开始前加一个 第也不行。你甚至不能改变标记的字体大小让小圆点跟着旁边的文字一起缩放都做不到。第二条路是li::before模拟。这个方法很流行核心思路是list-style: none掉原生标记然后用::before生成一个带符号的内容再利用绝对定位或者负margin把它挪到列表项主机内容的左侧。这套方案能实现很多视觉效果比如一个打了勾的方框、自定义图标、带圈数字但它踩了语义的坑::before创建的内容是 内容流 的一部分不是列表标记。屏幕阅读器可能会把它和列表正文混在一起读复制粘贴的时候中间会多出一些奇怪的字符。而且当列表项换行时快速对齐和缩进很不稳定很多团队为此写了不少补丁样式。第三条路是list-style-image加背景图或者直接在li上放一张小图。这套方案对视觉还原友好但它彻底和文本样式脱钩图片不会跟随主题色变化也不能根据font-size自动缩放高 DPI 设备还得额外准备二倍图。做深色模式的时候你往往需要准备第二套图标成本直接翻倍。1.2 ::marker 的本质浏览器的列表渲染模型要理解::marker就得先回到 CSS 列表渲染的根上。一个display: list-item的元素在浏览器内部实际上由两个 盒子box组成主块级盒子main block box和标记盒子marker box。主盒子承载列表项正文内容标记盒子负责生成那个序号或者项目符号。这两个盒子共同构成了列表项的结构而不是像::before那样把符号插入到内容盒内部。这就解释了::marker真正给我们的是什么它直接指向标记盒子让我们能对这个独立元素做样式修改。在传统 CSS 中标记盒子是渲染引擎内部的一个 隐藏 部分你只能通过list-style-*属性间接修改它。::marker则把这个隐藏部分暴露出来变成一个可控的伪元素。这里需要强调一个容易混淆的概念::marker并不是一个虚拟的新盒子它是列表项本来就存在的那个标记盒子。伪元素只是你在 CSS 中访问它的视角。所以它不会增加额外的 DOM 结构也不会干扰列表项的内容流自然解决了很多::before模拟方案带来的副作用。同时它依然遵循列表渲染模型占用的位置仍然是标记盒子的位置因此不会打破原有列表的缩进和对齐逻辑。1.3 浏览器支持历程慢是因为这个功能并不简单很多人觉得::marker只是一个 放开了部分样式 的小功能为什么要等这么久实际上标记盒子在浏览器的实现历史上一直是内部组件不同浏览器对它内部结构的处理方式差异巨大。最早的尝试可以追溯到 2010 年前后但规范一直不稳定。Chrome 68 开始出现了对基础属性的支持但content属性真正可用还要等到 Chrome 86。Firefox 在 68 版本左右跟上了大部步伐。Safari 11.1 也开始支持部分功能但整套属性的兼容性在不同版本中一直有细微差异。直到今天如果我们查阅 Can I Use 的数据::marker在主流浏览器中的基础支持率已经相当高。你想要改变它的颜色、字号、字体、文本装饰和自定义内容在现代 Chrome、Edge、Firefox、Safari 里都能正常工作。它会偶尔在部分老版本浏览器的某个属性上出现小问题但整体来说已经具备生产落地条件。2. ::marker 基础语法能改什么、不能改什么2.1 支持属性速查::marker的可用属性是严格定义的这种限制不是浏览器不愿意放开而是标记盒子的本质决定的。这里是目前规范允许和浏览器实测可用的属性清单。属性类别具体属性说明字体相关font-family、font-size、font-weight、font-style、line-height可以单独设置注意font简写的兼容性文本颜色color最常见的用法改变标记颜色文本装饰text-transform、text-decorationtext-shadow、text-emphasis控制符号的大小写转换、下划线、阴影等排版属性white-space、direction影响标记内部空白处理和文字方向内容替换content自定义标记内容覆盖list-style-type动画过渡animation、transition多数浏览器支持对颜色、字号、透明度做过渡opacity部分浏览器实测可工作但不建议依赖你肯定注意到了这上面没有background、border、padding、margin、display、width、height这些常见盒模型属性。因为标记盒子是一个类似 原子内联 的元素它不支持盒模型。想要给列表标记画一个背景框那不是::marker该干的活你要么换用li::before要么考虑counter-style配合其他方案。当然如果你非要在标记上做复杂背景仍然可以用li本身的样式来兜底但这就偏离了::marker的用法了。2.2 选择器与生效条件::marker只能用在display: list-item的元素上这个前提很重要。默认的li元素自然是display: list-item另一个比较常见的是summary元素它默认也生成一个标记盒子默认是展开箭头。此外你可以手动给任意元素设置display: list-item让它也能使用::marker。选择器可以写成li::marker, summary::marker { color: #087f5b; } .custom-list-item::marker { content: ; }如果你鬼使神差地在一个div上定义了::marker但这个div的display是默认的block那么这个::marker不会产生任何效果浏览器也不会报错。理解这一点你在调试时就不会浪费时间。需要注意::marker和*::marker这种通配选择器是可以用的但没必要。用它来全局重置所有列表标记样式会造成一些不可预期的结果尤其是后续想保留部分原生标记时会很难覆盖。2.3 与 list-style-* 系列属性的协同大多数情况下::marker是对list-style的增强而不是替代。两者的关系可以理解为list-style-type决定默认标记内容的文本list-style-position决定标记盒子是放在主盒子外面outside还是里面insidelist-style-image用图片覆盖标记内容但图片不跟字体样式::marker可以对标记盒子本身的样式做精细控制甚至通过content修改标记内容。实际开发中你可以保留list-style-type: none来禁用原生标记再用::marker的content设置自己的内容也可以保留list-style-type只改::marker的颜色。它们可以共存优先级是list-style-image::marker { content }list-style-type。list-style-position仍然生效。outside时标记盒子独立于主盒子左侧inside时标记盒子作为主盒子的内容首部。改变::marker的样式不会改变这个布局逻辑。3. 实战案例用 ::marker 定制列表标记3.1 基础着色让项目符号跟上品牌色最低成本也是最实用的用法就是把标记改成品牌色。以前想做到这一点要么给圆点套一个span要么用li::before模拟现在一行::marker就解决ul li::marker { color: #e63946; }这段代码让所有无序列表的圆点都变成红色。它不能修改标记的形状但颜色跟随主题色已经解决了颜值的大部分问题。如果列表中的一部分项特别强调可以利用ul li.current::marker这样的选择器单独变色ul li.current::marker { color: #f4a261; font-size: 1.3em; }实测下来font-size使用em是相对标记字体默认大小计算的所以不用在意继承的问题它会自己缩放不会把正文文字挤坏。3.2 自定义符号对勾、星号、箭头用content替换默认标记是::marker的进阶功能。比如做一个阅读清单希望每项前面是对勾或者做一个步骤列表希望用箭头数字开头的都可以直接干.checklist li::marker { content: ✓ ; color: #2a9d8f; font-weight: bold; } .steps li::marker { content: → ; color: #457b9d; }这里有一个细节content字符串末尾建议加一个空格。不加空格标记紧贴着正文会显得挤加了空格替代了浏览器默认那个天然间隙。在某些浏览器中空格字符可能会被折叠或者影响换行行为这个我留到踩坑部分细讲。你可以放任意字符包括 CSS 转义序列比如✔可以用content: \2714 表示不需要复制尴尬的特殊字符到 CSS 里。但要注意content只接受字符串和转义字符不能放 HTML 标签。想要一张图片做标记可以使用content: url(path/to/image)不过url()生成的图片和文字标记在缩放上差异很大不如直接用content加字符来得稳。3.3 编号列表变化数字样式、加前后缀::marker配合有序列表可以做出带特效的序号。比如序号不仅加粗还带上括号或后缀符号ol li::marker { font-weight: 700; color: #1d3557; content: ( counter(list-item) ) ; }这里使用了counter(list-item)函数。注意对于有序列表浏览器内部有一个隐藏计数器叫list-item在没有显式list-style-type修改时它会算出当前列表的编号。在::marker的content里可以直接访问这个计数器。上面这个写法等同于自动生成(1)、(2)这样的标号比手动在 HTML 里写死数字要优雅得多。不过如果你显式设置了list-style-type: lower-roman此时counter(list-item)可能仍然返回十进制计数所以一般更推荐保留系统计数器只改连续样式ol li::marker { color: #e63946; font-weight: 600; }这个写法改变数字的颜色和粗细但保留浏览器原生 1。 2。 3。 的显示序列样式。如果你又想要自定义内容又想保留原生序号可以直接用content: counter(list-item) . ;来复现配合list-style-type: none以避免双重计数。3.4 给summary元素换箭头details组件的默认箭头也是::marker渲染的。很多人为了换箭头把summary的list-style: none设置后再用::before画一个自定义箭头。现在可以直接改summary::marker { content: ▸; color: #6a4c93; }Christopher这个替换在小范围测试中很有效。但注意不同浏览器捕获summary展开状态与收起状态的方式不同::marker无法区分状态。如果你需要箭头方向在展开前后变化那还是要去配合summary::before以及[open]属性来做响应式切换。::marker适合做静态的视觉增强不适合做状态同步。4. 深入原理和踩坑实录你以为的 ::marker 和实际上的 ::marker4.1 它和 ::before 的渲染差异Box 树里的两个不同位置::before和::marker都是 伪元素但它们产生的盒子位置完全不同。我把这段历史讲清楚你以后排查列表样式时就能迅速定位。::before生成的盒子是主盒子内部的第一个子盒子它参与内容流布局会被padding、border包围也会被position定位影响。::marker生成的盒子是列表项主盒子旁边的独立标记盒子它不参与主盒子的内部布局即使在outside模式下也只占列表项整体布局的一个外部位置。所以当你使用li::before做一个符号时它会出现在正文内容的左边因为你需要的其实是在内容流内插入一个符号。而::marker做同样的事情它出现在标记盒子的位置本身已经是列表结构的一部分。这就是为什么::marker不需要你设置position: absolute或者负margin来移动位置。理解这个区别还能帮你解释一件事为什么::marker不能设置background。因为background属于盒模型的视觉绘制范围而标记盒子本身是一个原子内联级盒子它不生成背景层。浏览器不想为这个简化的盒子引入复杂盒模型的视觉行为。4.2 踩坑一粗体字符和普通字符的基线问题我经常看到有人在::marker里设置一个自定义符号比如 ➤ 或 ✔ 但发现符号和正文基线对不齐。这其实是字体渲染不是::marker的锅。如果你设置的符号字体和正文不一致它们的基线可能是由一个字体内部的度量决定特别是图标字体基线偏移非常明显。我的做法是给::marker设置font-family: inherit继承正文然后再选择正文中的字符来做符号这样能保持字体一致性。如果你使用特殊符号尽量用文本形态的符号而不是图标字体因为图标字体往往不是为文本基线设计的。4.3 踩坑二content 里的空格与换行content: ✓ 的尾部空格在不同浏览器中的处理并不统一。在我测试中Safari 有时会忽略尾随空格导致符号紧贴正文Chrome 和 Firefox 一般保留但如果你在content里用了换行符\A 在某些情况下这些空白会参与布局造成意外换行。安全的写法是不要依赖尾部空格来制造间距而是给::marker设置margin-right: 0.5ch之类的属性。但前面提到过margin在::marker上不被支持。怎么办你可以用list-style-position: inside时给li设置padding-left并调整主内容的text-indent来间接控制标记和文本之间的空隙。想彻底绕开这个坑最好给content里直接包含一个窄空格字符比如\2009 thin space或者使用空格后加white-space: preli::marker { content: ✓ ; white-space: pre; }实测white-space: pre能稳定保留空格但会让标记和内容的间距变得比默认稍大。根据项目视觉要求调。4.4 踩坑三font 简写可能不生效早期::marker对font简写的支持有一些版本差异。建议不要用font: italic bold 1.2em serif;这种简写方式因为简写会重置一堆子属性其中有些可能不被::marker支持结果可能被浏览器忽略。更稳妥的是分别写li::marker { font-family: inherit; font-size: 1.1em; font-weight: bold; font-style: normal; }这类写法的兼容性更稳也便于排查问题。4.5 调试与特征检测在 Chrome DevTools 中你可以在样式面板里选中::marker伪元素直接在 Elements 面板中给列表项的.::marker添加样式。Firefox 的 DevTools 也支持规则会显示在伪元素子面板中。不过这两个浏览器调试工具的视觉效果略有差异Chrome 会模拟一个灰色的 marker 框而 Firefox 直接在列表项右边显示实时效果 — 对比着看更容易定位问题。特征检测可以这样写 CSSsupports selector(li::marker) { li::marker { color: red; } }supports selector()是标准能力老浏览器会忽略整个块这样可以安全渐进增强。5. 无障碍、兼容性策略与生产实践建议5.1 对屏幕阅读器的影响::marker改变视觉标签时屏幕阅读器怎么读取很遗憾这个没有统一标准在不同的读屏软件里表现不同。实测中部分读屏软件会忽略自定义content继续按列表结构朗读序号另一些会把自定义content文本朗读出来。所以如果你的自定义content内容是一段有实际含义的文字比如一个对勾 ✓它可能会被朗读为 对勾 或者 check mark这不算坏。但如果你把content设置为一段长文本比如 第 xxx 项 之类的那么这些文字可能不会被读出来或者被以某种意外的顺序读出来。我的建议是不要在::marker中放置关键信息尤其是提示性的文字。标记的目的只是视觉辅助如果需要在无障碍语义中提供信息应该写在li的内容里或者使用aria-label显式标注。5.2 兼容性现状与降级方案市场占有率最高的现代浏览器对::marker的基础支持已经足够。但也要看到content属性在 Safari 老版本中出现过不稳定行为。如果你希望万一不支持时不至于让用户看到光秃秃的ul没有任何符号可以使用如下渐进增强套路/* 基础样式所有浏览器生效 */ li { list-style-type: none; } li::before { content: •; margin-right: 4px; } /* 支持 ::marker 的浏览器覆盖上面的实现 */ supports selector(li::marker) { li::before { content: none; } li::marker { content: → ; color: #333; } }这个思路是不支持::marker的老浏览器退回::before方案支持的新浏览器使用更精确的::marker方案。实际项目中supports selector的兼容性已经很好所有常青浏览器都支持因此这个降级方案很安全。5.3 与其他伪元素一起用时的优先级如果你在同一个列表项里同时使用了li::before和li::marker两者并不冲突li::marker控制标记盒子li::before作为主盒子内部的第一个子盒子仍然可以在列表项正文开头放置内容。如果你需要做一个文本前面的装饰 列表标记的效果可以叠加使用但要小心视觉混乱li::marker { content: ◆; color: #f00; } li::before { content: [info] ; color: #999; }这在功能上没问题但视觉上列表项会多出两级符号。设计评审时通常不需要这么做。5.4 实际项目中的建议根据我在多个内容型项目中的实际经验::marker最适合的场景是你希望列表标记成为一种轻量级的视觉设计元素但又不想引入复杂 DOM 结构。比如文章排版里的目录、功能特性列表、步骤编号、导航菜单当前页标识。它特别适合深色模式切换因为color跟随变量:root { --marker-color: #333; } [data-themedark] { --marker-color: #f0f0f0; } li::marker { color: var(--marker-color); }这比图片方案少准备一套图标也好维护得多。但如果你需要的视觉复杂度远超文字符号比如背景圆角标签、带边框的序号、多层级嵌套计数器的复杂组合那还是回到li::before或内嵌span更实际强行用::marker会碰到盒模型受限和 Debug 成本增加的问题。工具永远是选择最合适的::marker不是万能的但它把列表标记从不可控变成了可控已经覆盖了绝大多数日常用列表标记的场景。我自己在重构一套文档站点时统一用::marker替换了原来散落的十几个::before模拟方案。结果不仅减少了 CSS 行数而且列表换行、复制粘贴、深色模式适配这些积压问题都干净了很多。如果你手头正好有一堆li列表正在和各种各样的list-style较劲不如试试::marker能不能让你少写两行定位代码。