如何使用 CSS 和 JavaScript 自訂有序列表？

使用 CSS 和 JavaScript 自訂有序列表

有序列表提供了一種按順序呈現項目的便捷方式。但是，在某些情況下，您可能想要自訂這些清單的外觀，例如以不同方式對齊數字或使用替代編號系統。

有序列表中的左對齊數字

要將有序列表中的數字左對齊，您可以使用以下CSS：

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}

li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}

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

這程式碼重新定義了有序清單及其清單項目的顯示屬性，並使用偽元素(::before) 為每個項目新增左對齊數字。

更改後面的字符Number

要更改有序列表中數字後面的字符，您可以在::before 中使用CSS content 屬性偽元素：

li::before {
  ...
  content: counter(item) "){";
  ...
}

使用CSS切換到字母/羅馬列表

要將編號系統從數字更改為字母或羅馬字符，您可以操作li 內的反增量屬性CSS：

li {
  ...
  counter-increment: item lower-alpha;
  ...
}

結論

透過使用CSS 和JavaScript，您可以輕鬆自訂有序清單以適合您想要的外觀。這包括左對齊數字、更改數字後的字元以及在不同的編號系統之間切換。這些解決方案與現代瀏覽器相容，確保不同平台上的呈現一致。

以上是如何使用 CSS 和 JavaScript 自訂有序列表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！