::marker

::markerCSS擬似要素で、リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択します。これは 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 完全対応 86
完全対応 86
完全対応 80
無効
無効 From version 80: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 86
完全対応 86
完全対応 80
無効
無効 From version 80: this feature is behind the Enable experimental Web Platform features preference.
Firefox 完全対応 68IE 未対応 なしOpera 未対応 なしSafari 完全対応 11.1WebView Android 完全対応 86Chrome Android 完全対応 86
完全対応 86
完全対応 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 完全対応 11.3Samsung Internet Android 未対応 なし
Animation and transition supportChrome 完全対応 86
完全対応 86
完全対応 83
無効
無効 From version 83: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 86
完全対応 86
完全対応 83
無効
無効 From version 83: this feature is behind the Enable experimental Web Platform features preference.
Firefox 完全対応 80IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 86Chrome Android 完全対応 86
完全対応 86
完全対応 83
無効
無効 From version 83: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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

関連情報

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