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

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

Sep 2, 2020 — 更新日期 Sep 2, 2020

Available in: English, Русский, 日本語, and 한국어

Adam Argyle

Twitter GitHub Glitch Homepage

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 伪元素的样式。

未来的伪元素样式 #

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

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

Last updated

Sep 2, 2020 — Improve article

Return to all articles