::marker
The ::marker CSS pseudo-element selects list item markers for styling numbers or bullets. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The ::marker CSS pseudo-element selects list item markers for styling numbers or bullets. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 86 | 86 | 68 | 11.1 | 86 | 11.3 | |
animation and transition support Animation and transition support | 86 | 86 | 80 | 14.1 | 86 | 14.5 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Safari support is limited to `color` and `font-size`.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Safari on iOS support is limited to `color` and `font-size`.
Syntax
CSS
li::marker {
color: #e74c3c;
font-size: 1.2em;
font-weight: bold;
}Live demo
Use cases
Refine text rhythm
Use ::marker to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply ::marker when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test ::marker in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.
Related links
Powered by web-features