::marker
::marker は CSS の擬似要素で、リスト項目の箇条書き記号ボックス（ふつうは黒丸や番号が入ったもの）を選択します。これは display: list-item が設定された要素や擬似要素、例えば <li> 要素や <summary> 要素で利用できます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 86 | 86 | 68 | 11.1 | 86 | 11.3 | |
animation and transition support アニメーションとトランジションのサポート | 86 | 86 | 80 | 14.1 | 86 | 14.5 |
注釈 2件
制限事項
- このブラウザでは部分的にしか実装されていません
実装メモ
- Safari のサポートは「color」と「font-size」に限定されています。
注釈 2件
制限事項
- このブラウザでは部分的にしか実装されていません
実装メモ
- iOS 上の Safari のサポートは「color」と「font-size」に限定されています。
基本構文
CSS
li::marker {
color: #e74c3c;
font-size: 1.2em;
font-weight: bold;
}ライブデモ
実務での使いどころ
-
リストマーカーの色やサイズ変更
箇条書きのマーカーにブランドカラーを適用し、サイズや太さを調整してデザインの一貫性を保ちます。
注意点
- ::markerで適用可能なプロパティは限定されています。Safariでは2026年3月時点で未サポートです。
アクセシビリティ
- マーカーの色を変更する場合、背景色との十分なコントラスト比を維持してください。