::marker

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The ::marker pseudo-element is for styling the stylistic marker of a list element. For example, the bullet point of a default <ul> (e.g. •) or the numeral of a default <ol> (e.g. 1.). This makes it extremely easy to do simple things like colorize them.

Like a pseudo-element, you’ll be able to select ::marker in DevTools to inspect, but it’s not really “in the DOM” like a normal element.

Chrome DevTools selecting the ::marker pseudo-element and showing the styles.

You can combine ::marker with the content property to change what the marker is. For example, replacing list bullets with emoji (just not yet in Safari):

If you change the display property to list-item on any element, you can control its ::marker. Here <h3> elements are numbered, which combines the idea of CSS counters:

The markers are still list markers, so are subject to things like list-style-position.

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
8668No8611.1

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312211.3-11.4

More information