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

Question

我想要这样的列表样式(jsfiddle):

可以看到，列表样式为:

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

问题:

How do I achieve this task?

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>