有哪些浏览器支持CSS3伪元素“marker”？

Question

规范指定，可以使用伪元素"marker"来修改列表项(li)标记，例如：

li::marker { color: blue; }

但是我似乎无法在任何浏览器中使其工作。

是否有任何浏览器支持它？或者我做错了什么？

- Avi Flax

---

+1 感谢您提出这个问题！如果没有它，我就不会知道规范的这一部分。 - Zack The Human

你的错误在于假设只要W3C TR是公开可用的，它就自动成为“规范”的一个规范部分，因此必须存在实现才能按照描述使用其功能。从前言中可以看出：“作为工作草案的发布并不意味着得到W3C会员的认可。这是一份草案文件，可能随时被更新、替换或废弃。将其引用为除了正在进行的工作之外的其他内容是不合适的。” - BoltClock

六年过去了，人们仍在寻找此功能，显然它还没有被实现。我想我们将不得不继续使用变通方法。 - TecBrat

Answer 1

2021更新：所有现代浏览器都已经添加了对::marker的支持。

• Firefox自v68开始支持
• Safari自v11.1开始支持（仅限color和font）
• Chrome（和Edge）自v86开始支持
• Opera自v72开始支持

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility

- Rob

---

截至2014年3月，似乎还没有主要的浏览器实现这一功能。 - William Isted

截至2015年10月，情况仍旧如此。虽然没有相应的CanIUse页面，但可以在CSS-Tricks上跟踪其支持状态（https://css-tricks.com/almanac/selectors/m/marker/）。 - Ivan Akulov

截至2016年2月，这仍然是事实。 - kimberley_p

截至2016年9月，这仍然是事实。 - Dav

尽管可以使用Caniuse，但仍无法在Safari上运行。请参考以下链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::marker - eric-blue

@eric-blue 不看代码，至少有部分支持，并且显然 ::marker 的定义中存在“流量”。 - Rob

Answer 2

虽然没有浏览器支持该规范，但Firefox有自己的实现方式：

li::-moz-list-bullet {
color:blue;
}

来源：https://bugzilla.mozilla.org/show_bug.cgi?id=205202

这是一个关于Firefox浏览器的错误报告。该错误描述了在使用Firefox时，当用户调整字体大小或缩放页面时，页面上的某些元素可能会变形或错位。此错误已被确认并将在未来版本中进行修复。

- DADU

Answer 3

你能使用:before代替吗？

li {
 display: block;
 list-style-position: inside;
 margin: 0;
}
li:before { 
 content:" • ";  
 color: green;
}

- Eystein

---

可能，但这并不是这个问题真正关注的重点。 - Avi Flax

True。尽管在支持之前，有人可能会发现它很有用。 - Eystein

使用CSS生成的项目符号而不是默认的浏览器生成的项目符号会改变项目符号的大小和位置。这并不妨碍使用此解决方法，但您应该考虑是否可接受。 - Jukka K. Korpela

Answer 4

你无法单独更改标记的颜色，但是你可以使用list-style-image更改其图像，请参见此处。解决方法：

<ul><li style="color:blue;"><span style="color:black">test</span></li></ul>

- Babiker

---

谢谢，但颜色位只是一个例子。我真的只想知道是否有任何浏览器支持这个特定的伪元素。 （我特别想使用“content”属性。） - Avi Flax

Answer 5

没有浏览器支持此功能，但可以使用(list-style-type:和list-style-image)属性或伪类before和after。

- Faisal Sahar