Menu
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?
460
CSS3 Features Supported by All Modern Browsers As a side point in this section, IE9 does provide fairly strong support for CSS3 selectors, pseudo-classes, and pseudo-elements, which you can see here.
::marker. The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item , such as the <li> and <summary> elements.
The CSS list-style-position property is used to set marker position of list items. The default value for this property is outside which sets the marker outside the list item.
2021 update: all modern browsers have added support for ::marker
color and font)https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
107
Could you use :before instead?
li {
display: block;
list-style-position: inside;
margin: 0;
}
li:before {
content:" • ";
color: green;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
