::marker
リストアイテムの先頭に表示されるマーカー（箇条書き記号や番号）を直接スタイリングできる疑似要素です。従来はlist-style-typeの変更に限られていたマーカーの装飾を、color、font-size、contentなどのプロパティで柔軟にカスタマイズできます。
概要
リストアイテムの先頭に表示されるマーカー（箇条書き記号や番号）を直接スタイリングできる疑似要素です。従来はlist-style-typeの変更に限られていたマーカーの装飾を、color、font-size、contentなどのプロパティで柔軟にカスタマイズできます。
対応ブラウザ
デスクトップ
Chrome 86+
Edge 86+
Safari 未対応
Firefox 80+
モバイル
Chrome Android 86+
Safari iOS 未対応
Firefox Android 80+
基本構文
CSS
li::marker {
color: #e74c3c;
font-size: 1.2em;
font-weight: bold;
}実務での使いどころ
-
リストマーカーの色やサイズ変更
箇条書きのマーカーにブランドカラーを適用し、サイズや太さを調整してデザインの一貫性を保ちます。
注意点
- ::markerで適用可能なプロパティは限定されています。Safariでは2026年3月時点で未サポートです。
アクセシビリティ
- マーカーの色を変更する場合、背景色との十分なコントラスト比を維持してください。