::marker

翻译不完整。 请帮助我们翻译这篇文章!

::marker CSS pseudo-element(CSS伪元素) 选中一个list item的marker box,后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上,例如<li><summary>

::marker {
  color: blue;
  font-size: 1.2em;
}

允许的属性值

在将::marker作为选择器的规则中,只能使用某些CSS属性:

规范指出,将来可能会支持其他CSS属性。

语法

::marker

示例

HTML

<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

CSS

ul li::marker {
  color: red;
  font-size: 1.5em;
}

Result

标准

Specification Status Comment
CSS Pseudo-Elements Level 4
::marker
Working Draft No significant change.
CSS Lists Module Level 3
::marker
Working Draft Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::markerChrome Full support 86
Full support 86
Full support 80
Disabled
Disabled From version 80: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 86
Full support 86
Full support 80
Disabled
Disabled From version 80: this feature is behind the Enable experimental Web Platform features preference.
Firefox Full support 68IE No support NoOpera No support NoSafari Full support 11.1WebView Android Full support 86Chrome Android Full support 86
Full support 86
Full support 80
Disabled
Disabled From version 80: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 68Opera Android No support NoSafari iOS Full support 11.3Samsung Internet Android No support No
Animation and transition supportChrome Full support 86
Full support 86
Full support 83
Disabled
Disabled From version 83: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 86
Full support 86
Full support 83
Disabled
Disabled From version 83: this feature is behind the Enable experimental Web Platform features preference.
Firefox Full support 80IE No support NoOpera No support NoSafari No support NoWebView Android Full support 86Chrome Android Full support 86
Full support 86
Full support 83
Disabled
Disabled From version 83: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

参见