如何使用 CSS 自定义 Firefox 3 中的有序列表？

在 Firefox 3 中自定义有序列表

左对齐列表编号：

向左- 对齐有序列表中的数字，使用以下命令代码：

li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

此代码在每个列表项之前创建一个伪元素，显示数字后跟一个右括号。数字在 2em 的固定宽度内左对齐，margin-left 属性确保其与列表项缩进。

更改数字字符：

要更改有序列表中数字后面的字符，请修改 li::before 声明中的 content 属性的值。例如，要使用句点而不是括号，请使用以下命令：

content: counter(item) ".";

字母/罗马列表的 CSS 解决方案：

转换有序列表从数字到字母或罗马字符而不使用 type 属性，请使用 counter-reset、counter-increment 和 list-style-type properties:

ol {
  counter-reset: item;
}
li {
  counter-increment: item;
  list-style-type: none;
}
li::before {
  display: inline-block;
  content: counters(item, ".") " ";
}

此代码将项目计数器重置为从 1 开始，为每个列表项目递增它，并使用 list-style-type: none 隐藏默认数字。然后，content 属性创建一个伪元素，显示字母或罗马字符，后跟句点。

以上是如何使用 CSS 自定义 Firefox 3 中的有序列表？的详细内容。更多信息请关注PHP中文网其他相关文章！