0

我使用了带有一些 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>

4

1 回答 1

1

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

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>

于 2019-10-02T18:06:28.190 回答