`::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.)

[wpt-interop]

Thank you for proposing ::marker pseudo-element for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.