CSS list markers and counters: change appearance without changing order

How the rule works

An intake workflow has several numbered review steps. Use an ordered list in HTML, then style its marker to match the product's typography. The CSS may reset and increment a counter for a more elaborate visual treatment, but it should not be the only place the sequence exists. If items are added by the server, the visible sequence should update without hard-coded numbers in every item. A counter's scope follows the element tree, so a nested list may need its own reset to prevent unexpected numbering. Test skipped steps, nested notes, print output, and styling disabled. For ordinary decimal numbering, prefer the native marker before writing counter rules.

.intake-steps { list-style: decimal; padding-inline-start: 2rem; }
.intake-steps li { padding-inline-start: .35rem; margin-block-end: .75rem; }
.intake-steps li::marker { color: #175b44; font-weight: 700; }

Cost and verification

The marker style costs little and leaves the list's semantic order intact. A custom counter system costs more editorial attention because resets, nested levels, and skipped items can yield misleading numbers. The sample stays with native decimal markers for that reason. Check marker contrast and alignment with a two-digit step count and a right-to-left locale. If the list uses a start value or reversed order, keep that instruction in HTML; CSS must not invent the logical sequence.

Common Mistakes

• Do not build a procedural sequence from plain paragraphs and generated numbers.
• Do not hide markers without a replacement that remains understandable.
• Do not assume every nested list shares one counter scope.

Connected lessons

• CSS Type and Media
• CSS pseudo-elements: decorate without relocating meaning
• CSS logical properties: space content by reading direction
• HTML lists: choose ordered, unordered, or term-description structure

Further type and color decisions

• CSS @counter-style: give a finite marker set an honest fallback