如何设置CSS有序列表样式以显示1-2、3-4、5-6等编号格式

问题分析 #

你原来的代码逻辑错误在于：在:before伪元素中两次调用同一个计数器item，但counter-increment是在content生成后才生效的，导致两次输出的是同一个数值，最终显示2-2、4-4这类不符合预期的结果。

修正方案 #

通过调整计数器的递增逻辑，利用计数器数值的差值生成范围编号，代码如下：

CSS 代码

ol.custom-list {
  list-style: none;       /* 移除默认编号 */
  counter-reset: item 0;  /* 初始化计数器为0 */
}

ol.custom-list li {
  counter-increment: item 2; /* 每个列表项让计数器递增2 */
}

ol.custom-list li:before {
  content: counter(item) - 1 "-" counter(item) " "; /* 计算范围：当前计数器值-1 到 当前计数器值 */
  font-weight: bold;
}

HTML 代码

<ol class="custom-list">
  <li>number one</li>
  <li>number two</li>
  <li>number three</li>
</ol>

效果说明 #

• 第一个列表项：计数器值为2，计算后显示1-2 number one
• 第二个列表项：计数器值为4，计算后显示3-4 number two
• 第三个列表项：计数器值为6，计算后显示5-6 number three

完全符合你想要的显示格式。

内容的提问来源于stack exchange，提问作者hobbsie