HTML + CSS:没有句点的有序列表？

Question

我认为这个问题的答案是否定的......但有没有人知道一种HTML/CSS方式来创建一个有序列表而没有一段时间后的数字？或者,或者,指定分隔符？

理想情况下,我不想为每个数字使用不同的类进行list-style-image,但这是我迄今为止所能想到的......这看起来非常不合情理.

IE:

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

Desired Style:
1  ______
2  ______
3  ______

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

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 */
}

Answer 2

这是解决方案

数字嵌套HTML中的有序列表

所有你需要做的就是改变一点点

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

^^

Answer 3

这可以使用 CSS 伪元素来实现::marker，它具有很好的浏览器支持。

但请注意，Safari 有一个突出的错误来支持该content属性，因此这种方法在那里不起作用。在某些情况下，这可能没问题，因为后备行为只会显示额外的时间段。

ol { counter-reset: my-counter-name; }

li { counter-increment: my-counter-name; }

li::marker { content: counter(my-counter-name); }

Answer 4

您可以通过为计数器样式指定空后缀来使用 CSS 删除点：

@counter-style empty-style {
  system: extends decimal;
  suffix: ' ';
}

ol {
  list-style: empty-style;
}

::marker您可以使用伪元素进一步设置数字的样式。

请注意， Safari（任何版本）或旧版 Edge 中根本不支持此技术。但幸运的是，它在这些浏览器中性能下降得很好，渲染默认点没有问题。

所以，这是一个很好的渐进增强。