使用 CSS marker 伪类来自定义列表项目符号

使用 CSS marker 伪类来自定义列表项目符号

使用 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

::markercontent相对,更改 a 的内容list-style-type。在下一个示例中,第一个项目使用设置样式list-style-type,第二个项目使用设置样式::marker。第一种情况下的属性不仅适用于标记,还适用于整个列表项,这意味着文本和标记一样都在制作动画。使用时,::marker我们只能定位标记框而不定位文本。

更改 ol 项目符号

默认情况下,有序列表项上的标记是数字,而不是项目符号。在 CSS 中,这些功能称为 Counters,功能非常强大。它们甚至具有可设置和重置数字开始和结束位置的属性,或将其切换为罗马数字的属性。我们可以样式吗?是的,我们甚至可以使用标记内容值来构建我们自己的编号表示形式。

li::marker {
  content: counter(list-item) "<"; 
  color: hotpink;
} 

自定义 ol 项目符号