HTML CSS：没有句点的有序列表？

Question

我认为这个问题的答案是否定的……但是有没有人知道一种 HTML/CSS 方法来创建一个有序列表而没有数字后的句点？或者，或者，指定分隔符？

理想情况下，我不想为每个数字使用不同类的列表样式图像，但这就是我到目前为止所能想到的……这似乎非常不合逻辑。

IE：

 Default Style:
1. ______
2. ______
3. ______

Desired Style:
1  ______
2  ______
3  ______

Alternate Style:
1) ______
2) ______
3) ______

原文由 Andrew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这完全有可能仅使用 CSS (2.1)：

 ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

请记住，此解决方案依赖于 :before 伪选择器，因此一些较旧的浏览器（尤其是 IE6 和 IE7）不会呈现生成的数字。对于这些浏览器，您需要添加一个额外的 CSS 规则，仅针对它们以使用正常的列表样式：

 ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是解决方案

HTML 中的数字嵌套有序列表

你所要做的就是在这里稍微改变一下

ol li:before {
                content: counter(level1) " "; /*Instead of ". " */
                counter-increment: level1;
            }

^^

原文由 Kent 发布，翻译遵循 CC BY-SA 3.0 许可协议