css ::marker

/* 使用 ::marker 伪元素来样式化列表项的标记 */

/* 基本示例 */
ul {
  list-style-type: none; /* 移除默认的列表样式 */
}

ul li::marker {
  content: "★ "; /* 自定义标记内容 */
  color: red; /* 设置标记颜色 */
  font-size: 1.2em; /* 设置标记字体大小 */
}

/* 更复杂的示例：使用计数器 */
ol {
  list-style-type: none;
  counter-reset: item; /* 初始化计数器 */
}

ol li::before {
  counter-increment: item; /* 每个列表项递增计数器 */
  content: counters(item, ".") " "; /* 显示计数器值 */
}

ol li::marker {
  content: "(" counter(item) ")"; /* 自定义标记为带括号的计数器值 */
  color: blue; /* 设置标记颜色 */
}

解释说明：

• ::marker 是一个 CSS 伪元素，用于选择列表项 (<li>) 的标记（如圆点、数字等）。
• 在第一个示例中，我们移除了默认的列表样式，并使用 ::marker 来自定义标记的内容、颜色和字体大小。
• 在第二个示例中，我们使用了 CSS 计数器来生成有序列表的编号，并通过 ::marker 来自定义标记的显示方式。