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 ReadyAdd counters and configure auto-numbering — preview updates in real time
/* Add a counter to get started */
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).
| 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, ".") |
| 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 |
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.
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.
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.
HTML <ol> uses CSS counters internally. With custom counters you can number headings, figures, tables, or any element — not just list items.