html - 自定义、常规、有序的项目符号列表样式

Question

我想要这样的列表样式（jsfiddle）：

如您所见，列表样式为：

1. 不是 CSS 提供的样式之一，即自定义样式
2. 是常规的，即我不必为 s 手动输入值 1、2、3 等<li>。因此，如果我有四个<li>s，它会自动放置四个绿色圆圈，其值为 1,2,3,4。

问题：

我如何完成这项任务？

Answer 1

您可以使用 CSS 计数器自动执行此操作。当在 DOM 中找到匹配的选择器时，CSS 计数器会增加（我们也可以指定增加多少，但这超出了这个答案的范围）。然后可以将计数器的值设置为content伪元素的属性。

ul {
  counter-reset: li-counter;
  list-style-type: none;
}
li {
  counter-increment: li-counter;
  margin: 10px;
}
li:before {
  display: inline-block;
  content: counter(li-counter);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #20ED89;
  color: white;
  text-align: center;
  line-height: 30px;
  margin: 10px;
}

<ul>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
</ul>