Question

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

Answer 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>

列表标签始终显示0

1 个答案: