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

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
::marker
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 68IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 68Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

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

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mdnwebdocs-bot
最終更新者: mfuji09,