CSS::marker自定义列表样式全解析

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《CSS ::marker自定义列表样式详解》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

::marker 伪元素可用于自定义列表标记的颜色、字体等样式，如设置红色加粗数字或项目符号；但不支持 content 属性，无法直接插入自定义符号或计数内容，需改用 list-style: none 配合 ::before 实现复杂效果；对于有序列表的计数定制，应使用 counter-increment 与 ::before 结合；嵌套列表中可通过层级选择器调整不同层的标记样式，提升可读性。

CSS 的 ::marker 伪元素允许我们自定义列表项前的标记符号，比如有序列表（

）中的数字或无序列表（
）中的圆点。通过它，可以轻松改变颜色、大小、内容等样式，而无需修改 HTML 结构。

改变默认标记的颜色和字体

使用 ::marker 可以为标记设置颜色、字体粗细等基本样式，不影响列表项其余内容。

li::marker {
  color: #e74c3c;
  font-weight: bold;
}

上面代码会让所有

• 元素前面的标记变成红色加粗。适用于
  的数字或
  的项目符号。

  用 content 模拟自定义符号（仅限简单场景）

  ::marker 不支持 content 属性，不能像 ::before 那样直接插入文本或图标。但可以通过其他方式间接实现类似效果。

  若想使用自定义符号（如 ✓、★），建议改用 ::before 并配合 display: list-item 或取消默认列表样式：

  ul.custom {
    list-style: none;
    padding-left: 0;
  }
  <p>ul.custom li {
  position: relative;
  padding-left: 20px;
  }</p><p>ul.custom li::before {
  content: "★";
  color: gold;
  position: absolute;
  left: 0;
  }</p>

  这种方法更灵活，虽然不再使用 ::marker，但在需要图标或复杂符号时是标准做法。

  控制有序列表的计数样式

  虽然 ::marker 本身不能修改计数逻辑，但结合 counter-reset 和 counter-increment 可以实现高级定制。

  ol {
    counter-reset: step-counter;
    list-style: none;
  }
  <p>ol li {
  counter-increment: step-counter;
  }</p><p>ol li::marker {
  content: counters(step-counter, ".") ". ";
  color: blue;
  }</p>

  注意：上述 content 写法在 ::marker 中无效 —— 因为 ::marker 不支持 content。正确做法是使用 ::before 来显示自定义计数：

  ol li::before {
    content: counter(step-counter) ". ";
    color: blue;
  }
  

  适配不同层级列表的样式

  嵌套列表中，::marker 会自动继承默认行为（如数字、字母、罗马数字）。可通过选择器分别设置不同层级的样式：

  /* 第一层 */
  ol > li::marker {
    color: #2c3e50;
    font-size: 1.1em;
  }
  <p>/<em> 第二层 </em>/
  ol ol > li::marker {
  color: #7f8c8d;
  font-variant-numeric: tabular-nums;
  }</p>

  这样可以让深层列表的标记更小或颜色更浅，增强可读性。

  基本上就这些。::marker 适合做颜色、字体等简单修饰，复杂自定义建议搭配 list-style: none 和 ::before 实现。不复杂但容易忽略的是它对 content 的限制。

  今天关于《CSS::marker自定义列表样式全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！