Free online CSS Counter Generator — visually create CSS auto-numbering counters. Supports counter-reset, counter-increment, counter() and counters() functions. Customize counter names, initial values, stepping, and display styles (decimal, roman, alpha, Greek, etc.). Live preview updates as you configure. One-click copy generated CSS code. Pure frontend, works offline.
Visual · Live Preview · Zero Dependency · Offline ReadyCounter Settings
Add counters and configure auto-numbering — preview updates in real time
Live Preview
Preview — Counter Numbering
/* Add a counter to get started */
How CSS Counters Work
CSS counters let you use the counter-reset, counter-increment properties and counter()/counters() functions to create auto-numbering on any elements — not just ordered lists. Supports nested counters (e.g. 1 → 1.1 → 1.1.1).
Key Properties
| Property/Function | Description | Example |
|---|---|---|
counter-reset | Create or reset a counter | counter-reset: section 0; |
counter-increment | Increment a counter | counter-increment: section; |
counter(name) | Get counter's current value | content: counter(section); |
counter(name, style) | Display with counter style | content: counter(section, upper-roman); |
counters(name, sep) | Display nested counters | content: counters(section, ".") |
Common Counter Styles
| Style Value | Result | Description |
|---|---|---|
decimal | 1, 2, 3 | Decimal numbers (default) |
lower-roman | i, ii, iii | Lowercase Roman numerals |
upper-roman | I, II, III | Uppercase Roman numerals |
lower-alpha | a, b, c | Lowercase letters |
upper-alpha | A, B, C | Uppercase letters |
Usage Guide
1. Enter a counter name (e.g. section, figure, item).
2. Set initial value (usually 0) and increment step (usually 1).
3. Choose a counter style (decimal, roman, alpha, etc.).
4. Click "Add" to add the counter — the live preview updates immediately.
5. Adjust any parameter — preview and CSS code update in real time.
6. Click "Copy CSS" to copy the generated CSS code to clipboard.
FAQ
Do CSS counters support nesting?
Yes! CSS counters automatically handle parent-child nesting. Use the counters(name, separator) function for nested counters, e.g. content: counters(section, ".") produces "1", "1.1", "1.1.1", etc.
Why isn't my counter showing?
Common issues: ① The element's display is none; ② counter-reset isn't on a parent element; ③ content: counter() must be in a ::before or ::after pseudo-element.
How is this different from <ol>?
HTML <ol> uses CSS counters internally. With custom counters you can number headings, figures, tables, or any element — not just list items.