[译]在CSS使用自定义符号::marker在这篇文章讨论的::marker是伪元素，是浏览器提供给你可设置项目符号元素

使用伪类::marker可轻松实现符号或者数字的某些样式

浏览器兼容性

chromium86发布后，Firefox桌面版、安卓、Safari桌面版、iOS Safari、基于chromium内核的桌面版软件以及安卓浏览器都支持`::marker`。更详细的可以查看的MDN的兼容性列表。

伪元素

观察下列代码中的无序列表

<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是伪元素，是浏览器提供给你可设置项目符号元素的样式的能力。

创建一个marker

::marker伪元素在每个列表项内部自动生成的，是实际存在的，和伪元素::before类似。

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

通常，列表项指的是<li>元素，其他种类元素也可以使用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

::marker的出现，使得列表可以用list-style-type和list-style-image来设置列表项的符号。

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伪元素做一些有趣的操作，可以参考一下下面的列表，列表展示了支持的CSS属性和不支持的CSS属性。

支持的 CSS属性 ::marker animation-* transition-* color direction font-* content unicode-bidi white-space

注：::marker与content是等价的。

改变marker的内容

有很多方式可以设置你的marker的样式

//更改全部列表项
li {
  list-style-type: "😍";
}

/* OR */

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

//更改某一个列表项
li:last-child::marker {
  content: "😍";
}

//设置marker内容是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>");
}

改变有序列表的样式

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

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

调试

Chrome DevTools随时可以检查、调试和修改应用于::marker伪元素的样式

END

文章完结，后面有彩蛋

somethong I think you will be interested in😋

`Counters`计数器（from MDN）

介绍本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。CSS计数器是在CSS2.1中实现的。计数器的值通过使用counter-reset和counter-increment操作，在counter上应用couner()或counters()函数来显示在页面上。 使用方法 在是用CSS计数器之前，必须重置一个值，默认是0。使用counter()函数来给元素增加计数器。

body {
  counter-reset: section;           /* 重置计数器成0 */
}
h3:before {
  counter-increment: section;      /* 增加计数器值 */
  content: "Section " counter(section) ": "; /* 显示计数器 */
}

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

[译]在CSS使用自定义符号::marker