::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 属性：

备注： 规范指出，将来可能会支持其他 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

浏览器兼容性

参见