css伪类元素的特点（::marker伪元素简介）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9849

::marker 是CSS中新出的一种伪元素，用来匹配列表项中的“标记盒子”（盒模型中的一种，《CSS世界》中有介绍），并可以设置标记盒子里面的内容以及与字符显示相关的UI。

可以匹配任意设置了 display:list-item 的元素或伪元素，例如大家比较熟悉的 <li> 元素就可以直接使用::marker伪元素改变项目符号颜色、字号字体、甚至内容。

例如：

<ol> <li>有序列表</li> <li>作者张鑫旭</li> <li>看看序号的颜色？</li> </ol>

::maker { color: deepskyblue; font-weight: bold; }

实时效果如下所示（Chrome 86 ）：

1. 有序列表
2. 作者张鑫旭
3. 看看序号的颜色？

如果是普通的HTML标签元素，例如 <div> 元素想要使用 ::marker 伪元素，可以设置 display 为 list-item ，代码示意：

<div class="marker">summary元素有自己的marker伪元素</div>

可以使用如下所示的CSS代码让DIV元素有自己的标记：

div.marker { display: list-item; margin-left: 1em; padding-left: 5px; } div.marker::marker { content: '▶'; }

实时渲染效果如下（左侧应该是个三角尖头，如果浏览器不支持会是一个圆点，如果什么都没有，您访问的是盗版）：

summary元素有自己的marker伪元素

其中：

• content:'▶' 不是必须的，默认就会创建符号‘·’作为项目符号，如下图所示。
• margin-left:1em 也不是必须的，可以设置 list-style-position:inside 让项目符号字符的位置在标签内。
• 标记字符可以是任意字符，数量也不限，例如：div.marker::marker { content: '→→→→→'; }此时的效果是下面这幅模样：注意，Safari浏览器目前还不支持 content 自定义标记符号，仅支持 list-style-type 属性设置标记符号，是时候祭出这张十几年的老图了。

和::first-letter伪元素、::first-line伪元素类似， ::marker 伪元素仅支持部分的CSS属性，具体如下：

• 所有font相关的属性，例如 font-size ， font-family 等，但是不包括 line-height 属性。
• white-space 属性；
• text-shadow 属性（仅Chrome支持），其他text相关属性并不支持；
• letter-spacing 和 word-spacing 属性（仅Chrome支持）；
• color 属性；
• text-combine-upright 、 unicode-bidi 和 direction 属性，这几个属性与文字排版方位相关；
• content 属性，Safari目前不支持
• 所有动画和过渡相关的CSS属性，也就是 animation 和 transition 属性；

其中，支持 animation 和 transition 属性着实让我意外了一番，这在字符性质的伪元素中还是很少见的。

不过， ::marker 伪元素支持的CSS属性里面支持动画的CSS属性并不多，也就是 color 属性能用用，因此，潜力一般般，完全没有 ::before 和 ::after 这两个伪元素支持动画和过渡来得给力。

然后Firefox浏览器虽然很早就支持了 ::marker 伪元素，但是 ::marker 支持动画是80这个版本才开始支持的，刚支持没多久，还很热乎。

使用示意：

.marker { display: list-item; } .marker::marker { transition: color .2s; content: '▶'; } .marker:hover::marker { color: deepskyblue; }

效果参见下面的GIF录屏：

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9849（作者张鑫旭）

我在 CSS Pseudo-Elements Module Level 4规范 中找到这么一句话：

The ::before::marker or ::after::marker selectors are valid and can be used to represent the marker boxes of ::before or ::after pseudo-elements that happen to be list items. However ::marker::marker is invalid, and the computed value of display on ::marker loses its list-item aspect.

意思是 ::before::marker 和 ::after::marker 选择器都是合法的，只需要 ::before 和 ::after 是列表项，也就是 display 计算值是 list-item 。

我勒个擦，这要是支持了可就牛逼大了， content 嵌套啊，可以做的事情那就多了呀，相当于任意元素的前后又多了一层伪元素，理论上，一层标签里面呈现的文字可以有5种不同的颜色，于是我火速整了个demo看看效果如何，究竟支不支持。

您可以狠狠地点击这里： ::before/::after中使用::marker伪元素demo

测试代码如下：

<div class="target">一个标签5种颜色</div>

.target::before { content: '左边符号颜色是？'; display: list-item; list-style-position: inside; color: deepskyblue; } .target::before::marker { color: red; } .target::after { content: '右边符号颜色是？'; display: list-item; list-style-position: inside; color: olive; } .target::before::marker { content: '橙色'; color: orange; direction: rtl; }

结果页面刷新一看……失望，只有3种颜色！

DOM中有 ::marker 元素标记，但是没有任何匹配，连浏览器默认的样式都没有匹配。

这妥妥的欺骗纯情少年的感情啊！

明明规范说支持的，结果就像凌晨3点的菜市场——什么也没有！而且没有一个浏览器支持。

想起了一句诗，“王师北定中原日，家祭无忘告乃翁”，唉，什么时候上面的demo页面变成5种颜色了，大家记得知会我一声，我撒个花庆祝一下。

目前，所有现代浏览器均已经支持了 ::marker 伪元素（ 实时兼容性 ），Chrome浏览器也是最近几个月才支持的，很新鲜很热乎。

终于有办法可以让项目列表的符号的颜色和正文颜色不一样咯，用起来，渐进增强，不要担心浏览器不支持。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9849