::marker

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

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

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

利用できるプロパティ

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

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

::marker

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

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

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

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`::marker`	Chrome 完全対応 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 完全対応 80 無効完全対応 80 無効無効 From version 80: this feature is behind the `Enable experimental Web Platform features` preference.	Firefox 完全対応 68	IE 未対応なし	Opera 未対応なし	Safari 完全対応 11.1	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 完全対応 68	Opera Android 未対応なし	Safari iOS 完全対応 11.3	Samsung Internet Android 未対応なし