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

5

21

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 seem to get it to work in any of my browsers.

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

Raeannraeburn answered 31/12, 2010 at 21:20 Comment(3)
+1 Thanks for asking this question! I wouldn't have know about this part of the spec without it.Helbonnah
What you did wrong was assume that just because a W3C TR is publicly available, it automatically makes it a canonical part of "the spec" and that therefore implementations must exist for you to use the features as described. From the preamble: "Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress."Crockery
6 years later and people are still looking for this and apparently it's not being implements. I guess we'll have to keep using hack-arounds.Inglebert
P
16

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

Poll answered 1/1, 2011 at 6:5 Comment(6)
As of March 2014 it appears that no major browsers have implemented this as yet.Riley
As of October 2015, the situation is the same. There’s no according CanIUse page for it, but the support status can be tracked on CSS-Tricks.Glitter
As of Feb 2016, this is still the case.Vaporing
As of Sept 2016 this is still the case.Artiodactyl
doesnt work on safari still despite caniuse developer.mozilla.org/en-US/docs/Web/CSS/::markerByron
@Byron Without looking at it myself, there is partial support at a minimum and, apparently, "flux in the definition" of ::marker.Poll
B
3

Could you use :before instead?

li {
 display: block;
 list-style-position: inside;
 margin: 0;
}
li:before { 
 content:" • ";  
 color: green;
}
Bukavu answered 5/4, 2011 at 18:34 Comment(3)
Possibly, but that's not really what the question is about.Raeannraeburn
True. Somebody might find it helpful until it becomes supported though.Bukavu
Using CSS-generated bullets instead of default browser-generated bullets changes the size and position of the bullets. This need not prevent from using this workaround, but you should consider whether it is acceptable.Laureen
L
3

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

Leahleahey answered 11/8, 2011 at 22:48 Comment(0)
I
1

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>
Isolation answered 31/12, 2010 at 21:31 Comment(1)
Thanks, but the color bit was just as an example. I really do just want to know whether any browsers support this specific pseudo-element, as such. (I'm specifically looking to use the content property.)Raeannraeburn
H
0

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

Hogle answered 12/9, 2014 at 6:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.