如何使用 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中文網其他相關文章！