现在，在使用 <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

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

更改 ol 项目符号

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

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