自定义，常规，有序的子弹列表样式

Question

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

如您所见，列表样式为：

1. 不是CSS提供的样式之一，即自定义样式
2. 是常规的，即我不必手动为<li> s设置值1,2,3等。所以，如果我有四个<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>