`::marker` pseudo-element

[nileshprajapati]

Description

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.

• Safari support is limited to color and font-size. See bug 204163.
• Webkit currently does not support ::marker pseudo-element for summary element and instead relies on non-standard ::-webkit-details-marker pseudos in WebKit-based browsers.

Specification https://www.w3.org/TR/css-pseudo-4/#selectordef-marker

Specification

https://www.w3.org/TR/css-pseudo-4/#selectordef-marker

Additional Signals

No response

[chriskirknielsen]

I was about to submit a similar issue — I had grievances with this pseudo-element's styling a few months ago already and made this small demo: https://codepen.io/chriskirknielsen/pen/oNRzdzG

Chrome

As expected.

Firefox

letter-spacing is ignored

Safari

content is ignored

[gsnedders]

https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=marker%20%28css-lists%20or%20css-pseudo%29 maybe? (I also can't see any tests for ::marker on the summary element in WPT.)