::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 |
浏览器兼容性
加载中…