此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
::marker
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
::markerCSS伪元素匹配列表的标记框(通常为一个符号或数字)。它作用在任何设置了display: list-item 的元素或伪元素上,例如<li> 和<summary> 元素。
In this article
尝试一下
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属性color属性text-combine-upright、unicode-bidi和direction属性content属性- 所有的animation 和transition 属性
备注:规范指出,将来可能会支持其他 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> |