如何在 HTML/CSS 中创建没有句点的有序列表？

在 HTML/CSS 中创建不带句点的有序列表

有序列表通常在列表编号后显示句点。但是，如果您需要通过删除这些句点来自定义外观怎么办？以下是对可用 HTML 和 CSS 解决方案的探索。

正如用户所提到的，CSS 提供了一种通过自定义样式来实现此目的的方法。要修改的关键 CSS 属性是：

• list-style-type：删除默认周期并应用新类型。
• counter-increment 和 counter-reset：创建将生成列表数字的自定义计数器。
• 内容：在伪元素中使用生成的计数器。

以下 CSS 代码演示了所需的功能：

<code class="css">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;
}</code>

通过组合这些 CSS 属性，您可以创建一个显示不带句点的数字的有序列表。另外，计数器自增：customlistcounter；属性允许您根据需要指定备用分隔符。

但是，值得注意的是，一些较旧的浏览器，例如 IE6 和 IE7，不支持 :before 伪选择器。为了确保兼容性，请考虑添加额外的 CSS 规则来针对这些浏览器并使用本机列表样式外观：

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

以上是如何在 HTML/CSS 中创建没有句点的有序列表？的详细内容。更多信息请关注PHP中文网其他相关文章！