如何自訂 CSS 清單樣式

今天要自訂清單。我在想，有沒有辦法用 CSS 自動計名單數量呢？

答案是有的：counter-increment。

  1. 設定 counter-increment 並命名計數器。
  2. 使用 counter() 或 counters() 使用該計數器。
  3. 使用 counter-reset 重設該計數器。

例如說你可以：

ul li
{
    counter-increment: foobar;
}

ul li:before
{
    content: "0" counter(foobar);
}

這樣的話 ul li:before 選擇器就會用上 foobar 計數器，並在 ul li 顯示自動計數了。如果需要給該清單數字自訂樣式，CSS counter 會很好用。

之後有空再探索這玩意好了。

20190804 增筆

Firefox 在 68 版增加了 ::marker 這虛擬選擇器，讓清單樣式可以自訂得更容易吧我想。這裡有兩個說明：

參考資料