The @counter-style rule defines a marker system for lists and generated counters. A fixed system supplies a finite sequence of symbols; its fallback descriptor defines how values outside that sequence appear. The ordered list still carries the sequence in HTML.
Make this comfortable
CSS @counter-style: give a finite marker set an honest fallback
When to use it
An incident review has three named stages today, represented by distinct circled markers. The process may gain a fourth stage later, so the marker definition falls back to decimal rather than repeating the first symbol or displaying an empty marker. Declare decimal before the custom style on the list so an unsupported browser keeps ordinary numbering. Test four and five stages, a list beginning at a nondefault value, browser zoom, and fonts that lack the circled glyphs. The style should never be the only way a reader learns a stage name; keep each item label in actual text. Numbered steps require an ol element in the document, not three visually numbered div elements. If the markers are essential to compliance documentation, review assistive-technology output because custom glyphs are announced differently across combinations of browsers and readers.
@counter-style review-stage { system: fixed; symbols: '①' '②' '③'; suffix: ' '; fallback: decimal; }
.review-steps { list-style-type: decimal; list-style-type: review-stage; padding-inline-start: 2.25rem; }Cost and verification
The marker rule is cheap to render. The more material cost is font coverage and consistency across print and assistive technology. A missing glyph may become a replacement character or a visually different symbol, so compare target platforms. A fixed system with fallback is safer than a cyclic one when repetition would falsely imply that stage four is stage one. The built-in decimal style remains the most predictable choice for long or frequently changing procedures. Keep the custom design local to the short process; a global ol rule can surprise unrelated lists. Verify line wrapping does not let a long marker collide with item text.
Common Mistakes
- Do not use a cyclic marker for ordered steps that may grow.
- Do not omit a fallback for values beyond the fixed set.
- Do not replace the semantic ordered list with decorative labels.
Connected lessons
css
reference
web