CSS ::marker伪元素简介
一、了解::marker伪元素
::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+）：
有序列表
作者张鑫旭
看看序号的颜色？
普通元素应用::marker
如果是普通的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: '→→→→→';
}
二、只支持部分CSS
和::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录屏：
标记字符颜色过渡动画gif
三、::before/::after中使用::marker
我在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
