css 伪元素::marker 是CSS Pseudo-Elements Level 4 中完善的一个比较新的伪元素，从Chrome 86+开始得到浏览器的支持。

利用它，我们可以给元素添加一个伪元素，用于生成一个项目符号或者数字。该伪元素的作用是可以用在任何设置了 display:list-item 的元素或伪元素上。

正常而言，我们有如下结构：

<ul>
  <li>Contagious</li>
  <li>Stages</li>
  <li>Pages</li>
  <li>Courageous</li>
  <li>Shaymus</li>
  <li>Faceless</li>
</ul>

上述是默认不添加任何样式，现在我们利用::marker 可以对序号前面的小圆点进行改造：

li {
  padding-left: 12px;
  cursor: pointer;
  color: #ff6000;
}
li::marker {
  content: '>';
}

::marker 使用说明

除了 ul 或 ol 下的 li 标签可直接使用::marker 伪元素，其他元素使用需要设置 display:list-item 的属性才支持哦。

其次，对于::marker 伪元素的样式，不是任何样式属性都能使用，目前只支持如下这样样式：

animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space

但是::marker 伪元素并不是所有浏览器都支持，chrome 也只是在 80 以上版本通过启用 experimental Web Platform 才支持，而 safari 浏览器目前还不支持对 content 进行自定义，只支持比较原始的几种。

同时::marker 伪元素也是对 list-style-image 和 list-style-text 的补充，都是定义标记块的填充内容，image 注重图像，text 注重字符串，::marker 则可以定 font、color 等样式。