CSS 的列表樣式(list-style-type)設定與 ::marker

我們在建立列表的時候一般會使用 ul 跟 li 的搭配，預設的樣式會是一個實心的點，如果要調整這個樣式可以使用 list-style-type 來設定，這邊來看一下可以設定的各種樣式的參數和樣子。

要更自由的話還可以設定 url 來自定樣式，不過這畢竟需要放一張圖還是有點不方便，但在後來有了 ::marker 之後，我們就可以更自由的設定列表前的樣式了。

這邊用 ::marker 來直接修改樣式

ol ::marker ,ul ::marker { 
  font-size: 1rem; 
  color: red; 
  font-family: "Comic Sans MS", cursive, sans-serif; 
}

結果

或是在內容上利用 content 做點變化。

li{
  counter-increment: li;
}
ol ::marker { 
  content: "#" counter(li) " ";
  font-size: 1rem; 
  color: red; 
  font-family: "Comic Sans MS", cursive, sans-serif; 
}