::marker伪元素

23天前105阅读约1分钟 

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 等样式。

css0 

::marker伪元素 - Jdeal | Life is like a Design.