::marker

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

css

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

利用できるプロパティ

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

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

構文

Error: could not find syntax for this item

例

HTML

html

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

CSS

css

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

結果

仕様書

Specification
CSS Pseudo-Elements Module Level 4
# marker-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報

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