CSS - 定制你的列表前缀 ::marker

现在我们可以使用::marker伪元素来定制列表前缀。像下面这样：

主流浏览器中只有Safari不是完全支持，不过估计也马上会跟上来了。

::marker CSS 伪元素选择列表项的标记框，通常包含项目符号或数字。 它适用于要显示的任何元素或伪元素集：列表项，例如 <li> 和 <summary> 元素。

让我们看个具体的例子：

默认显示效果如下，浏览器会自动画一个小点在每个列表项前：

创建marker

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

通常，列表项是 <li> HTML 元素，但其他元素也可以成为具有 display:list-item 的列表项。

给marker添加样式

在 ::marker 出现之前，可以使用 list-style-type 和 list-style-image 设置列表样式。这很方便，但我们需要更多。 改变颜色、大小、间距等，这就是 ::marker 出现的原因。 它允许从 CSS 中单独和全局定位这些伪元素：

list-style-type 属性提供了非常有限的样式。 ::marker 伪元素意味着您可以定位标记本身并将样式直接应用于它。

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

改变Marker的方法，两种方式，效果一样：

使用SVG：

使用数字列表：

默认情况下，有序列表项OL上的标记是数字而不是项目符号。 在 CSS 中，这些被称为计数器，它们非常强大。 它们甚至具有设置和重置数字开始和结束位置的属性，或者将它们切换为罗马数字。 我们可以直接使用::marker来做，

更多使用方法，大家可以查看MDN，感谢阅读！