Free CSS Counter Generator
Create automatic numbering with CSS counters. Build custom numbered lists, section headings, figure captions, and table of contents without JavaScript.
Nest counters for multi-level numbering like 1.1, 1.2, 2.1. Full control over number format and styling.
- Counter increment control
- Custom number formats
- Nested counter support
- Reset options
- Multiple counter styles
Frequently Asked Questions
- What are CSS counters?
- CSS counters are variables that automatically increment. Use counter-reset to create them, counter-increment to increase them, and counter() to display them.
- How do I create nested numbering like 1.1, 1.2?
- Use multiple counters—one for each level. Reset child counters when parent increments. Display with counters() function using a separator string.
- Can I use letters or roman numerals?
- Yes, use list-style-type values in counter(): 'counter(item, lower-alpha)' for a, b, c or 'counter(item, upper-roman)' for I, II, III.