Used in counter-reset and counter-increment
Element that gets the counter applied via ::before
Counter preview
Configure options and click Generate CSS// generate css counter styles for automatic numbering
Generate CSS counter styles for automatic section numbering, custom list markers, and ordered content. Preview live, copy clean CSS. Free, browser-based.
Counter preview
Configure options and click Generate CSSEnter a counter name like section or chapter.
Choose decimal, Roman, alphabetic, or custom symbols. Select heading, list, nested, or steps layout.
Adjust colors, prefix/suffix, font weight, then copy the generated CSS into your stylesheet.
CSS counters let you add automatic numbering to any HTML element using counter-reset, counter-increment, and counter() — without JavaScript. This tool generates the complete CSS boilerplate so you can focus on content, not syntax.
A CSS counter is a variable maintained by CSS that can be incremented by CSS rules, tracking how many times they are used. You define it with counter-reset, increment it with counter-increment, and display it using counter() or counters() inside a content property on a ::before or ::after pseudo-element.
Yes — CSS counters are a pure CSS feature. They work in all modern browsers (and have since IE8) with no JavaScript required. The numbering updates automatically as you add or remove elements in your HTML.
Use counters(name, separator) instead of counter(name). For example, counters(section, ".") produces "1.2.3" style numbers. The counter must be reset on each nested container element.
CSS supports many built-in styles: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, and more. You can also use @counter-style in modern browsers for completely custom symbols and patterns.
Yes. Apply counter-reset: yourCounter to any element to restart counting from that point. This is useful for chapters, appendices, or any time you need a fresh sequence within the same document.
CSS counters give you numbering on any element — headings, divs, figures — not just <ol> items. They also allow rich custom styling, prefix/suffix text, nested hierarchies like "2.4.1", and decorative symbols that plain <ol> cannot easily achieve.
CSS counters are one of the most underused features in CSS. Rather than hardcoding numbers into your HTML or relying on JavaScript to inject them dynamically, CSS counters let you define an automatically incrementing variable that gets rendered via pseudo-elements. The result is numbering that stays correct no matter how many items you add, remove, or reorder — all in pure CSS.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
The CSS counter mechanism involves three parts working together. First, you initialize a counter on a parent element using counter-reset: sectionCounter. This tells the browser "start tracking a counter named sectionCounter from zero." Second, each target element increments it with counter-increment: sectionCounter. Third, you display the value using the content property on a ::before pseudo-element: content: counter(sectionCounter).
The power comes from combining these three rules. Since CSS naturally follows document flow, counters are always in sync with the DOM — no JavaScript, no manual numbering, no bugs when content changes.
The counter() and counters() functions accept a second argument that controls the visual format. counter(sectionCounter, upper-roman) renders "I, II, III..." while counter(sectionCounter, lower-alpha) gives "a, b, c...". You can also combine @counter-style at-rules in modern browsers to define completely custom sequences using any Unicode symbol or string pattern.
Our generator supports all common built-in styles — decimal, upper/lower Roman numerals, upper/lower alphabetic — plus a custom symbol mode where you can specify space-separated characters that cycle through your list items.
The content property on ::before is a string — you can concatenate anything. A common pattern is content: "§ " counter(sectionCounter) "." to produce "§ 1." or content: "Step " counter(steps) ": " for step-by-step guides. This generator lets you set prefix and suffix strings separately and shows you the exact content value in the output.
When you switch to the Nested Outline use case, the generator uses counters(name, ".") — note the plural form. This recursive function walks up the DOM and concatenates each counter level with your chosen separator, producing hierarchical numbering like "1.", "1.1.", "1.1.2." automatically. This is the standard approach for legal documents, academic papers, technical manuals, and any outline structure.
The key to nested counters is proper scoping: reset the counter on the container element (e.g., ol), then increment on the item (e.g., li). Because CSS counters are scoped to their containing element tree, each level maintains its own count independently.
One of the most popular uses for CSS counters is automatically numbering headings in articles, documentation, and books. Rather than writing "1. Introduction" in your HTML, you write just "Introduction" and let CSS handle the number. This means if you move sections around or add new ones, all the numbers update automatically — no manual search-and-replace needed.
The typical pattern initializes the counter on the article or body element, then increments on each h2 and optionally h3 with a separate counter. The generator's "Section Headings" use case produces exactly this pattern, ready to drop into your stylesheet.
While list-style-type and modern @counter-style are cleaner for simple custom bullet points, CSS counters via ::before give you full control — you can add color, font weight, spacing, background, borders, and positioning that list-style cannot. The generator produces a ::before-based approach that works in all browsers and gives you complete styling freedom.
CSS counters (counter-reset, counter-increment, counter(), counters()) have universal support — every browser since IE8. The @counter-style rule for custom symbol sequences is supported in Chrome, Firefox, and Edge, but not Safari — our generator handles this by using the ::before content approach with cycling symbols via JavaScript-injected classes as a fallback-safe alternative.
CSS counters are extremely lightweight. They require no JavaScript, add no DOM nodes, and are handled entirely by the CSS engine during layout. For large documents with hundreds of numbered items, CSS counters are actually faster than JavaScript-injected numbers because they avoid DOM manipulation and reflow costs. They also work in print stylesheets, making them ideal for documents intended for PDF export or physical printing.
CSS counters work alongside any framework — Tailwind, Bootstrap, Foundation. Since they operate on pseudo-elements and CSS custom properties, there's no class conflict. You can scope the counter to a specific parent class (e.g., .prose h2) so it only affects designated content areas. The generated CSS from this tool is plain, framework-agnostic, and safe to paste directly into any stylesheet or CSS module.