CSS Counter Generator
Online CSS counter generator for counter-reset/counter-increment auto numbering with prefixes/suffixes and multiple formats, ideal for docs, outlines, and step lists.
Counter Settings
Preview
CSS code
body {
counter-reset: section 1;
}
.item {
counter-increment: section 1;
}
.item::before {
content: "" counter(section, decimal) ".";
margin-right: 0.5em;
font-weight: bold;
color: #f59e0b;
}HTML structure
<div class="item">First item</div>
<div class="item">Second item</div>
<div class="item">Third item</div>
<div class="item">Fourth item</div>Documentation
What is a CSS counter?
CSS counters are a powerful feature that lets you auto-number elements with CSS. Compared to a basic ordered list (ol), counters are more flexible: they can be applied to any element and allow custom start values, increments, numbering styles, and prefix/suffix text.
CSS counters are commonly used for section numbering, outlines, step-by-step instructions, and documentation layouts. With counter-reset, counter-increment, and the counter() function, you can build nested and multi-level numbering patterns.
How to use this tool
- Set the counter name, start value, and increment
- Choose a numbering style (decimal, alpha, roman, etc.)
- Optional: add a prefix and suffix
- Check the preview
- Copy the generated CSS and HTML into your project
Key features
- Custom name: use a valid CSS identifier for the counter
- Flexible start value: set any integer start
- Custom increment: supports positive, negative, or zero
- Multiple formats: decimal, alpha, roman, and more
- Prefix and suffix: add custom text around numbers
- Live preview: see changes immediately
FAQ
How is a CSS counter different from an ordered list?
Ordered lists typically provide simple numbering for li elements. CSS counters are more flexible: they can number any element, customize start/increment and formats, and support nested multi-level numbering patterns.
How can I keep numbering continuous across pages?
CSS counters restart when a page loads. For continuous numbering across multiple pages, you usually need server-side logic or JavaScript to persist and restore the counter value. This tool focuses on single-page numbering.
Is browser support good?
CSS counters are part of CSS2.1 and are supported by modern browsers such as Chrome, Firefox, Safari, and Edge. IE8 and above also support CSS counters.