::marker
::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;
}
結果
規範
| 規範 |
|---|
| CSS 偽元素模組 Level 4 # marker-pseudo |
瀏覽器相容性
載入中…