::marker

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS::marker 疑似要素は、リスト項目の箇条書き記号ボックス(ふつうは黒丸や番号)を選択します。これは display: list-item が設定された要素や疑似要素、例えば <li> 要素や <summary> 要素で利用できます。

::marker {
  color: blue;
  font-size: 1.2em;
}

利用できるプロパティ

::marker 擬似要素では、一部の CSS プロパティのみが利用できます。

この仕様書は、将来追加の CSS プロパティに対応する可能性があることを示しています。

構文

::marker

HTML

<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

CSS

ul li::marker {
  color: red;
  font-size: 1.5em;
}

結果

仕様書

仕様書 状態 備考
CSS Pseudo-Elements Level 4
::marker の定義
草案 重要な変更はなし。
CSS Lists Module Level 3
::marker の定義
草案 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
::markerChrome 完全対応 80
無効
完全対応 80
無効
無効 From version 80: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 完全対応 68IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 80
無効
完全対応 80
無効
無効 From version 80: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 68Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

  • 既定で箇条書き記号ボックスがある HTML 要素: <ol>, <li>, <summary>