DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！
::marker 伪元素用于设置列表元素的样式标记。例如，默认 <ul> 的项目符号（例如 •）或默认 <ol> 的数字（例如 1.）。这使得像更改颜色这样的简单操作变得非常容易。
就像 伪元素 一样，您可以在 DevTools 中选择 ::marker 进行检查，但它并不像普通元素那样“存在于 DOM 中”。
::marker 伪元素并显示样式。您可以将 ::marker 与 content 属性结合使用来更改标记的内容。例如，用表情符号替换列表项目符号（只是 Safari 还没有实现）
如果您将任何元素的 display 属性更改为 list-item，则可以控制其 ::marker。这里 <h3> 元素被编号，这结合了 CSS 计数器的概念
这些标记仍然是列表标记，因此会受到 list-style-position 等因素的影响。
浏览器支持
这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 86 | 68 | 否 | 86 | 11.1 |
移动/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 11.3-11.4 |
哇。2015年的文章在2019年仍然有糟糕的浏览器支持-_-
似乎并不难实现？
看起来Safari已经添加了支持。我已更新了浏览器支持部分——去投票支持这些功能请求吧！
在其他css-tricks文章中偶然发现了::marker.. 然后就来到了这里。可能值得一提的是（我相信）由于缺乏浏览器支持，::before仍然是一个不错的后备方案。
Safari（已测试版本14.0.2）不支持content属性
content: ” “;
不起作用
我们需要一个新词来形容“被半吊子浏览器实现打败”。
尝试使用marker的第一步：尝试对默认的项目符号进行任何操作，例如通过font-size调整其大小。基本的东西。现在它不再居中于文本行。哦，你不能对其应用任何定位，或平移，或垂直对齐？::marker基本上没用。使用::before。
看起来::marker伪元素可以被像NVDA这样的屏幕阅读器渲染，这会导致此类辅助技术产生不实用或无意义的内容朗读。
同意上一位评论者的观点，这次使用Safari 14.0.2 -‘content’根本不起作用。什么也没发生。