使用CSS计数器花式玩转列表编号

在网页设计中，以有组织的方式表示数据非常重要，这样用户可以轻松地了解网站或内容的结构。最简单的方法是使用有序列表。

如果你需要对数字的外观进行更多的控制，你可能会认为你需要通过HTML或JavaScript在DOM中添加更多的元素，并对其进行样式化。幸运的是，CSS计数器为你省去了很多麻烦。

在本教程中，我们将演示如何开始使用CSS计数器并介绍一些用例。

相关阅读： 使用CSS ::marker的自定义项目符号

有序列表的问题

当编写如下所示的有序列表时，浏览器会自动显示数字。

<ol>
  <li>My First Item</li>
  <li>My Second Item</li>
  <li>My Third Item</li>
</ol>

这很好，但它不允许你对数字进行样式化。例如，假设你需要把数字放在一个圆圈内。你会怎么做呢？

一种方法是完全摆脱列表，然后自己手动添加数字。

<div>
  <span>1</span> My First Item
</div>
<div>
  <span>2</span> My Second Item
</div>
<div>
  <span>3</span> My Third Item
</div>

<style>
div {
     
  margin-bottom:10px;
}
div span {
     
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background-color:#000;
  color:#fff;
}
</style>

这样做可以做到我们需要它做的事情，但也有一些缺点。其一，手写数字很困难。而且，如果你需要修改一个数字怎么办？你就得一个一个地改。你可以使用JavaScript动态添