これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

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,