::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>
要素で利用できます。
試してみましょう
利用できるプロパティ
::marker
擬似要素は、限られた数の CSS プロパティのみに対応しています。例えば以下のようなものがあります。
- すべてのフォントプロパティ
white-space
プロパティcolor
text-combine-upright
,unicode-bidi
,direction
の各プロパティcontent
プロパティ- すべてのアニメーションおよびトランジションプロパティ
メモ: 仕様書では、将来的にさらなる 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 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 既定で箇条書き記号ボックスがある HTML 要素:
<ol>
,<li>
,<summary>
- CSS 生成コンテンツモジュール
- CSS リストとカウンターモジュール
- CSS カウンタースタイルモジュール