::marker

::marker 是 CSS 中一个伪元素选择器，用于表示列表项的标记部分，即起始符号（通常是圆点、数字等）。

示例

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
</ul>

上述示例中，每一个 <li> 元素都包含了一个列表项的文本内容。但是，默认情况下，每个列表项前面都显示了一个黑色实心圆点作为标记符号。

我们可以通过 CSS 来改变这个标记符号的样式，例如将实心圆点改为英文字母，如下：

li::marker {
  content: counter(list-item, upper-alpha) ". ";
}

counter() 函数可以用于计数，第一个参数是计数器的名称，第二个参数是计数器的格式化方式。我们在这里使用了 upper-alpha 参数表示使用大写字母作为计数器格式。

更多用法

除了改变标记符号的样式之外，::marker 还可以用于其他方面，比如在有序列表中自定义 item 标记样式。

ol.custom-style {
  list-style: none;
  counter-reset: section;
}
ol.custom-style > li::marker {
  content: "S" counter(section) ".";
  margin-right: 5px;
}
ol.custom-style > li {
  counter-increment: section;
}

在上面的示例中，counter-reset 函数表示将计数器 section 重置为 0，counter-increment 函数则表示将计数器 section 加一。这样，我们可以通过该元素的位置来得到当前的计数器值，然后使用 content 属性为标记符号添加自定义内容。

总结

::marker 是一个常用于列表样式控制的 CSS 选择器，可以将标记符号的样式进行自定义，提高页面的美观性和可读性。