Reversed counter-reset
The reversed() CSS function for counter-reset creates a counter that counts down. 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 | |
reversed Experimental | | | 96 | | | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
ol {
counter-reset: reversed(rank);
}
li {
counter-increment: rank -1;
}
li::before {
content: counter(rank) '. ';
}Live demo
Use cases
-
Refine text rhythm
Use Reversed counter-reset to make long-form reading or dense interface copy easier to scan and understand.
-
Support language nuances
Apply Reversed counter-reset when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test Reversed counter-reset 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.