列表标签始终显示 0答案

【问题标题】：List tags always shows 0列表标签始终显示 0
【发布时间】：2019-10-02 18:02:52
【问题描述】：

我使用了带有一些 CSS 样式的无序列表。现在，所有列表项都显示为 0。我将 list-style 属性设为 none，因为我想显示一些特定的数字样式。我错过了什么吗？

ol.circle li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0971B2;
  border-radius: 100%;
  color: white;
  width: 1.4em;
  text-align: center;
  display: inline-block;
}

ol.circle {
  counter-reset: item;
}

ol {
  list-style: none;
}

<html>
<ol class="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  </ul>

</html>

【问题讨论】：

标签： css list html-lists

【解决方案1】：

您还需要使用counter-increment 属性增加每个li 元素上的计数器，并且该值是您要增加的计数器。

ul.circle li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0971B2;
  border-radius: 100%;
  color: white;
  width: 1.4em;
  text-align: center;
  display: inline-block;
}

ul.circle {
  counter-reset: item;
}

ul {
  list-style: none;
}

ul li {
  counter-increment: item;
}

<ul class="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

【讨论】：