CSS
在使用 <ul>
或 <ol>
时自定义数字或项目符号的颜色,大小或类型很简单。
利用css的:marker
伪元素,可以很轻易的更改内容以及项目符号和数字的某些样式。::marker
伪元素它作用在任何设置了display:list-item
的元素或伪元素上。
::marker
是什么?
css 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增,CSS Pseudo-Elements Level 4 中完善的一个比较新的伪元素,从 Chrome 86+ 开始得到浏览器的支持。
利用它,可以给元素添加一个伪元素,用于生成一个项目符号或者数字。
正常而言,有如下结构:
<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
使用说明
1、除了ul
或ol
下的li
标签可直接使用::marker
伪元素,其他元素使用需要设置display:list-item
的属性才支持。
2、其次,对于::marker
伪元素的样式,不是任何样式属性都能使用,目前只支持如下这样样式:(另外注意不允许的 background
属性是没有效果的)
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
3、::marker
伪元素标记不是所有浏览器都支持,包括chrome也只是在80以上版本通过启用experimental Web Platform才支持,而safari浏览器目前还不支持对content进行自定义,只支持比较原始的几种。
::marker
调试
Chrome DevTools随时可以帮助检查,调试和修改应用于 ::marker
伪元素的样式。
总结
列表在前端项目中很常见,应用场景也十分广泛。::marker
伪元素是对list-style-image
和list-style-text
的补充,三者都是定义标记块的填充内容,image
注重图像,text
注重字符串,::marker
则可以定font
、color
等样式,各具特色。