通过在项目符号和文本周围添加单独的方框来显示单个列表项的结构

使用 CSS ::marker 自定义项目符号

现在，当使用 <ul> 或 <ol> 时，自定义数字或项目符号的颜色、大小或类型非常简单。

— 更新日期
Available in: English, Русский, 日本語, and 한국어
Adam Argyle
Adam Argyle
TwitterGitHubGlitchHomepage
Oriol Brufau
Oriol Brufau
GitHub
本页内容

感谢 Bloomberg 赞助的 Igalia，我们终于可以把这些技巧加入样式列表中了。瞧！

查看源代码

凭借 CSS ::marker，我们可以更改项目符号和数字的内容以及一些样式。

浏览器兼容性 #

桌面版和 Android 版 Firefox、桌面版 Safari 和 iOS Safari 支持 ::marker（但仅支持 color 和 font-* 属性，请参阅错误 204163），基于 Chromium 的桌面版和 Android 浏览器也支持该元素。有关更新，请参阅 MDN 的浏览器兼容性表。

伪元素 #

考虑以下基本 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 伪元素，它可以为浏览器创建的项目符号元素设置样式。

创建标记 #

::marker 伪元素标记框在每个列表项元素的内部自动生成，位于实际内容和 ::before 伪元素之前。

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;
}

设置标记样式 #

在 ::marker 之前，可以使用 list-style-type 和 list-style-image 来设置列表的样式，从而更改第 1 行 CSS 的列表项符号：

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

这非常方便，但我们需要更多功能。比如说，如何更改颜色、大小、间距等？这就是 ::marker 能够派上用场的地方。它支持以单独和全局的方式从 CSS 定位这些伪元素：

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

list-style-type 属性提供了非常有限的样式类型。::marker 伪元素支持定位标记本身，并允许直接对其应用样式，从而实现更多的控制。

也就是说，您不能在 ::marker 上使用每个 CSS 属性。规范中明确规定了允许和不允许的属性列表。如果您尝试使用此伪元素执行一些有趣的操作，但发现不起作用，则可以参考下面的列表，其中介绍了允许和不允许的 CSS 属性：

允许的 CSS ::marker 属性 #

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

::marker 的内容通过 content（而不是 list-style-type）进行更改。在下一个示例中，第一项使用 list-style-type 设置样式，第二项使用 ::marker 设置样式。第一种情况下的属性适用于整个列表项，而不仅仅是标记，这意味着文本和标记一样具有动画效果。当使用 ::marker 时，我们可以只定位标记框，而不是文本。

另外，请注意不允许的 background 属性为何没有效果。

List Styles

```css li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; } ```

标记与列表项之间的混合结果

Marker Styles

li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

标记与列表项之间的焦点结果


更改标记的内容 #

下面是设置标记样式的一些方法。

更改所有列表项

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

仅更改一个列表项

li:last-child::marker {
  content: "😍";
}

将列表项更改为 SVG

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

更改编号列表<ol> 怎么样？默认情况下，有序列表项上的标记是数字，而不是项目符号。CSS 中将其称为计数器，这是一个非常强大的功能。它们甚至具有设置和重置开始/结束序号的属性，或者将序号改成罗马数字。我们可以设置这样的样式吗？当然可以，我们甚至可以使用标记内容值来构建自己的编号。

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

调试 #

Chrome DevTools 已准备就绪，可帮助您检查、调试和修改应用到 ::marker 伪元素的样式。

DevTools 打开，显示来自用户代理和用户样式的样式

未来的伪元素样式 #

您可以从以下位置找到有关 ::marker 的更多信息：

对于曾经难以设置样式的对象，现在能够找到一些办法真是太棒了。您可能希望为其他自动生成的元素设置样式，可能对 <details> 或搜索输入自动完成指示器感到失望，这些元素在浏览器中的实现方式不同。要分享您的愿望吗？您可以在 https://webwewant.fyi 上创建需求。

Last updated

— Improve article
Return to all articles
分享
By Chrome DevRel