有什么方法可以在有序列表中设置列表类型的样式吗？

Question

我正在使用有序列表

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

这导致

有什么方法可以只更改项目符号（A、B 和 C）的样式，使它们更轻更小，而使列表保持不变？

Answer 1

您无法设置实际计数器本身的样式，但可以隐藏它并用其他内容替换它。这可以是图像、图标或伪元素。

这是使用 before 伪元素的示例。

ol {
  list-style: none;
  counter-reset: li;
}

li::before {
  content: counter(li, upper-alpha);
  color: #999; /* whatever you wish, here is a light grey... */
  display: inline-block;
  font-size: 10px; /* whatever you need it to be... */
  margin-right: 10px;
}

li {
  counter-increment: li;
}

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

有很多不同类型的计数器，我使用 upper-alpha 来匹配您的帖子。