CSS ::marker: Browser Support, Properties, Limitations

What is CSS ::marker?

CSS ::marker is a pseudo-element from the W3C CSS Lists Module Level 3 that targets the marker box of any element with display: list-item. It applies to li, ol, ul, and summary, letting you style the bullet or number with a limited set of CSS properties.

Which browsers does CSS ::marker support?

CSS ::marker works in every modern desktop browser and in Chromium-based mobile browsers, while Safari ships partial support and Internet Explorer never added it. Coverage today reaches roughly 95% of global users when partial support is counted.

What CSS properties can you style with ::marker?

The ::marker pseudo-element accepts only a small set of CSS properties. The W3C CSS Lists Module Level 3 spec and MDN agree on which properties apply, so anything outside the list either has no effect or behaves inconsistently between browsers.

Properties that work on ::marker:

• Font longhands: font-family, font-size, font-weight, font-style, font-variant, and the rest of the font shorthand parts apply to the marker glyph.
• color: Sets the bullet or number color independently from the list item text.
• content: Replaces the default marker glyph with a string, a counter() value, or a Unicode symbol.
• All animation and transition properties: animation-name, animation-duration, transition-property, and the rest let you animate marker color, font-size, or content over time in Firefox and Chromium.
• Writing-mode helpers: direction, unicode-bidi, and text-combine-upright control the marker in vertical and right-to-left flows.
• white-space: Controls how trailing space inside content="" is preserved or collapsed.

Properties that do NOT work on ::marker:

• background and background-color: The marker box ignores background paints. Use list-style-image on the parent li for an image marker, or move the styling to a ::before pseudo-element.
• margin, padding, border, width: The marker is sized and positioned by the parent list-style-position value. Box-model properties have no effect on ::marker.
• text-decoration: Underlines and strike-throughs declared on ::marker are dropped by every implementing engine.
• position, display, flex, grid: Layout-changing properties do not apply to the marker box and are ignored.

/* Restyle the bullets and numbers on every list item. */
li::marker {
    color: hotpink;
    font-size: 1.25rem;
    content: "✦ ";
}

/* Replace the default ordered-list number with a custom format. */
ol li::marker {
    content: counter(list-item) ". ";
    font-weight: 700;
    color: #00b7a8;
}

The two rules above restyle every bullet on the page and replace the ordered-list number with a bold custom format that still increments through counter(list-item).

How do you change the marker in CSS?

Changing a marker takes one of two routes: replace the marker glyph with the content property, or restyle the default glyph through font and color properties. The steps below cover both routes in one pass.

• Pick the selector scope: Decide whether you want to change the marker for an entire list (li::marker), one specific item (li:first-child::marker), or every list-item element on the page (::marker).
• Decide replace or restyle: Use list-style-type: none on the parent if you plan to fully replace the glyph through content. Leave the default list-style-type if you only want to recolor or resize the existing bullet or number.
• Write the ::marker rule: Add li::marker { ... } to your stylesheet and set the property you want to change, such as color, font-size, font-family, or content.
• Use counter(list-item) for ordered numbers: When you replace the content of an ordered-list marker, call counter(list-item) so each item still increments. Plain string content overrides the number entirely.
• Test on Safari and Safari on iOS: Reload the page in Safari to confirm the limited WebKit support handles your rule. If the content property silently drops, fall back to list-style-type or list-style-image so Safari users still see a custom marker.

If the marker still does not change after these steps, check that the parent has display: list-item and that list-style-type is not set to none on a higher-priority rule, both of which suppress the marker box entirely.

What are the known issues with CSS ::marker?

CSS ::marker has clear sharp edges that show up only when you ship to production across browsers. Plan around these before you replace list-style-image with a ::marker rule.

• Safari only accepts color and font longhands: The content property and animation properties are buggy or rejected in WebKit, so any marker that relies on content="..." renders the default glyph in Safari and Safari on iOS instead of your custom symbol.
• Background and box properties are ignored by spec: background-color, padding, margin, and border do not apply to the marker box. Styles that draw a colored chip behind a number have to live on a ::before pseudo-element instead.
• Chromium forces white-space: pre on outside markers: Trailing whitespace inside content="" sticks, so write content="\u2726 " with the space included; the gap will not collapse the way it does in normal flow.
• list-style-type: none hides the ::marker entirely: If a parent rule sets list-style-type: none, the marker box is suppressed and ::marker has nothing to style. Reset list-style-type or apply display: list-item on a different element.
• Android Browser, Opera Mini, and Internet Explorer have no support: Treat ::marker as a progressive enhancement, with list-style-image as the cross-browser fallback for any audience that includes legacy mobile or enterprise browsers.

In my experience, the Safari partial-support gap catches more teams than any other browser quirk: a polished marker design ships, looks perfect in Chrome and Firefox, and falls back to the default disc in Safari without any console warning, so always include Safari in the test matrix before release.

Citations

All CSS ::marker version numbers and platform notes in this guide come from these primary sources:

• MDN ::marker CSS pseudo-element: developer.mozilla.org/en-US/docs/Web/CSS/::marker
• W3C CSS Lists Module Level 3: w3.org/TR/css-lists-3
• Mozilla Firefox 68 release notes (::marker support): developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68
• web.dev, Custom bullets with CSS ::marker: web.dev/articles/css-marker-pseudo-element
• CSS-Tricks Almanac, ::marker: css-tricks.com/almanac/pseudo-selectors/m/marker
• Smashing Magazine, CSS Lists, Markers, And Counters: smashingmagazine.com/2019/07/css-lists-markers-counters
• MDN list-style-type CSS property: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
• MDN list-item display value: developer.mozilla.org/en-US/docs/Web/CSS/display-listitem
• Wikipedia, Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets