开发者

Do any browsers support the CSS3 pseudo-element "marker"?

The spec specifies that one can modify list-item (li) markers using the pseudo-element "marker" like so:

li::marker { color: blue; }

But I can't see开发者_如何学Gom to get it to work in any of my browsers.

Do any browsers support this? Or am I doing something wrong?


2021 update: all modern browsers have added support for ::marker

  • Firefox since v68
  • Safari since v11.1 (limited to color and font)
  • Chrome (and Edge) since v86
  • Opera since v72

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


Could you use :before instead?

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


While no browsers support the spec, Firefox has it's own way of doing things:

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

Source: https://bugzilla.mozilla.org/show_bug.cgi?id=205202


You can't change the color of the marker alone, however you can change its image using list-style-image see here. Work-around:

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


No browser supports this but the (list-style-type: and list-style-image) properties can be used or the pseudo before and after classes.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜