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

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

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

利用できるプロパティ

::marker 擬似要素では、一部の 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 の定義
草案 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし なし なし なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし なし なし なし なし なし なし

関連情報

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

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

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