我使用了带有一些 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>最佳答案
您还需要使用 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>关于css - 列表标签始终显示 0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58206935/