在 CSS 中样式化列表标记

想要为列表项的标记设置样式是完全合理的。您知道：无序列表中带有黑色文本的蓝色项目符号。或者有序列表中带有白色数字的红色计数器。

有一个 正在制定的规范草案，它定义了一个 ::marker 伪元素，可以让我们控制这一点。

/* Not supported anywhere; subject to change */
li::marker {
  color: blue;
}

不过，现在可以通过 CSS 计数器实现这种样式设置。诀窍是删除 list-style，然后通过伪元素计数器应用标记。

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
li {
  counter-increment: my-awesome-counter;
}
li::before {
  content: counter(my-awesome-counter);

  /* Style away! */

}

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 带样式的列表计数器。