Lab.

list-style-type の「・」

css 2022年8月5日

listのタイプでdiskだとちょっとデカいんですよね。
じゃどうするか？というと今までは beforeで ”・”を設定したり画像を使ったりして、マージン調整するとかしてましたが、とうとうSafariで対応したらしいので marker を使おう！

li::marker

でOKです。まあ、マージン調整とかは必要なんですけど。

• リスト項目1
• リスト項目2
• リスト項目3

li::marker {
  color: #d02626;
  font-size: 1em;
}

フォントサイズで・のサイズが選べ、色も選べます。その他のプロパティはまだsafariで使えないはずなので、あまり派手に活躍するものではないかもです。
display: list-item; を使えばいいじゃんと思ったけれども、こちらはまだsafariで非対応の様子。
safariが昔のIEの様に煙たがられはしないかとヒヤヒヤしています。