::marker

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

試してみましょう

li::marker {
  content: "✝ ";
  font-size: 1.2em;
}

<p>Group known as Mercury Seven:</p>
<ul>
  <li>Malcolm Scott Carpenter</li>
  <li>Leroy Gordon (Gordo) Cooper Jr.</li>
  <li>John Herschel Glenn Jr.</li>
  <li>Virgil Ivan (Gus) Grissom</li>
  <li>Walter Marty (Wally) Schirra Jr.</li>
  <li>Alan Bartlett Shepard Jr.</li>
  <li>Donald Kent (Deke) Slayton</li>
</ul>

利用できるプロパティ

::marker 擬似要素は、限られた数の CSS プロパティのみに対応しています。例えば以下のようなものがあります。

メモ: 仕様書では、将来的にさらなる CSS プロパティに対応する可能性があるとしています。

構文

css
::marker {
  /* ... */
}

例

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

ブラウザーの互換性

関連情報