::marker

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

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

利用できるプロパティ

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

• All フォントプロパティ
• color
• text-combine-upright, unicode-bidi, direction の各プロパティ
• content プロパティ

構文

::marker

例

HTML

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

CSS

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

結果

仕様書

ブラウザーの対応

関連情報

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