::marker
は CSS の擬似要素で、リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択します。これは display: list-item
が設定された要素や擬似要素、例えば <li>
要素や <summary>
要素で利用できます。
::marker {
color: blue;
font-size: 1.2em;
}
利用できるプロパティ
::marker
擬似要素では、一部の CSS プロパティのみが利用できます。
- すべてのフォントプロパティ
white-space
プロパティcolor
text-combine-upright
,unicode-bidi
,direction
の各プロパティcontent
プロパティ- すべてのアニメーションおよびトランジションプロパティ
この仕様書は、将来追加の CSS プロパティに対応する可能性があることを示しています。
構文
::marker
例
HTML
<ul>
<li>Peaches</li>
<li>Apples</li>
<li>Plums</li>
</ul>
CSS
ul li::marker {
color: red;
font-size: 1.5em;
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Pseudo-Elements Level 4 ::marker の定義 |
草案 | 重要な変更はなし。 |
CSS Lists Module Level 3 ::marker の定義 |
草案 | 初回定義。 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。