::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 プロパティのみに対応しています。例えば以下のようなものがあります。
- すべてのフォントプロパティ
white-spaceプロパティcolortext-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 |
ブラウザーの互換性
Loading…
関連情報
- 既定で箇条書き記号ボックスがある HTML 要素:
<ol>,<li>,<summary> - CSS 生成コンテンツモジュール
- CSS リストとカウンターモジュール
- CSS カウンタースタイルモジュール