
使用 CSS marker 伪类来自定义列表项目符号
现在,在使用 <ul>
或 <ol>
时可以很简单地自定义数字或项目符号的颜色,大小或类型。
浏览器兼容性
当 Chromium 86 发布时,::marker
Firefox 在桌面和 Android,桌面版 Safari 和 iOS Safari 以及基于 Chromium 的桌面和 Android 浏览器中将受支持。
伪元素
考虑以下基本 HTML 无序列表:
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
这将渲染默认样式:
每个<li>
项目开头的点都是自动生成的,浏览器正在为你绘制并创建一个生成的标记框。
今天,我们很高兴谈论::marker
伪元素,它使你能够设置浏览器为你创建的 bullet 元素的样式。
创建标记
::marker
伪元素标记框会自动生成在每个列表项元素内,在实际内容之前。
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
通常,列表项是<li>
HTML 元素,但其他元素也可以通过成为列表项display: list-item
。
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "";
padding-inline-start: 1ch;
}
list-style-type
属性提供了非常有限的样式可能性。该::marker
元素可以指定标记本身和伪元素手段应用样式直接给它。这样可以进行更多控制。
也就是说,你不能在上使用所有 CSS 属性::marker
。规范中明确指出了允许和不允许的属性列表。如果你尝试使用此伪元素进行一些有趣的操作但不起作用,则下面的列表为你介绍了 CSS 可以做什么和不能做什么的指南:
允许的 CSS::marker
属性
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
::marker
与content
相对,更改 a 的内容list-style-type
。在下一个示例中,第一个项目使用设置样式list-style-type
,第二个项目使用设置样式::marker
。第一种情况下的属性不仅适用于标记,还适用于整个列表项,这意味着文本和标记一样都在制作动画。使用时,::marker
我们只能定位标记框而不定位文本。
更改 ol 项目符号
默认情况下,有序列表项上的标记是数字,而不是项目符号。在 CSS 中,这些功能称为 Counters,功能非常强大。它们甚至具有可设置和重置数字开始和结束位置的属性,或将其切换为罗马数字的属性。我们可以样式吗?是的,我们甚至可以使用标记内容值来构建我们自己的编号表示形式。
li::marker {
content: counter(list-item) "<";
color: hotpink;
}