Style list bullets and numbers with the ::marker pseudo-element — change color, font, size, and replace the bullet with an emoji, counter, or custom string. Pair with list-style-type for built-in numbering systems (roman, decimal-leading-zero, lower-greek, hiragana, hebrew, …) or define your own with @counter-style. Inheritable properties only: color, font-*, line-height, white-space, content, unicode-bidi, animation, transition.
The CSS spec keeps ::marker tightly restricted — only the inheritable text-shaping properties work. Box-model properties like margin, padding, background, border are ignored.
| Allowed | Ignored |
|---|---|
color, all font-*, line-height, white-space, content, unicode-bidi, direction, animation-*, transition-*, text-combine-upright, text-transform |
background, border, padding, margin, display, position, width, height, opacity, visibility |
Want a colored background pill or a custom shape? Use list-style: none on the list, hide the marker, and draw your own with ::before on each <li>.
list-style-type takes 100+ built-in keyword values (decimal, roman, alpha, CJK, Hebrew, Armenian, …) plus any custom @counter-style you define. A custom counter-style can use a fixed symbol list, additive systems (like Roman numerals), or alphabetic / numeric algorithms:
@counter-style emoji-stars {
system: cyclic;
symbols: "⭐" "🌟" "💫";
suffix: " ";
}
ol { list-style: emoji-stars; }
Once defined, the symbols are used as the marker for every item. This is broadly supported in Chrome, Edge, Firefox, and Safari 17+.
::marker: Chrome 86+, Firefox 68+, Safari 11.1+ (partial), Safari 17+ for full content support.@counter-style: Chrome 91+, Firefox 33+, Safari 17+.list-style-types are widely supported.li::before + list-style: none.