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

Question

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

如您所见，列表样式为：

不是 CSS 提供的样式之一，即定制样式
是常规的，即，我不必为 <li> 手动输入值 1、2、3 等。所以，如果我有四个 <li>，它会自动放置四个绿色圆圈，其值为 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>

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

Custom, regular, ordered bullet list style

html

css

css-counter