Create Custom Numbered Lists with CSS Counters Generate CSS counters for custom numbered lists with various styles and nesting.
CSS Counter Generator
Generate CSS counters for custom numbered lists with various styles and nesting.
Configure the counter
Set counter name, style (decimal, roman, alphabetic), prefix, and suffix.
Enable nesting
Optionally enable nested counters with custom separator characters.
Copy the CSS
Preview the numbered list and copy the complete counter CSS.
What Is CSS Counter Generator?
The CSS Counter Generator creates custom numbered lists using the CSS counter-reset, counter-increment, and content properties. CSS counters provide more flexibility than standard <ol> list numbering, supporting various numbering styles, custom prefixes and suffixes, nested numbering, and styling independent of list-style-type. This tool lets you configure the counter name, choose from ten numbering styles (decimal, leading-zero decimal, lower/upper alphabetic, lower/upper roman, Greek, and more), set custom prefix and suffix text, and optionally enable nested counters with a configurable separator. The preview shows the counter applied to a sample list with realistic content, and the generated CSS includes all necessary counter properties.
Why Use CSS Counter Generator?
-
Ten numbering styles including decimal, roman, and alphabetic
-
Custom prefix and suffix text around counter values
-
Nested counter support with configurable separators
-
Preview with realistic list content
Common Use Cases
Legal Documents
Create nested numbered sections (1.1, 1.2, 2.1) for legal and technical documents.
Step-by-Step Guides
Build custom numbered steps with styled counters for tutorials.
Table of Contents
Generate hierarchical numbering for document table of contents.
Custom Ordered Lists
Replace default list numbering with styled custom counters.
Technical Guide
CSS counters use three main properties: counter-reset initializes a counter on a parent element, counter-increment increases the counter on child elements, and counter() or counters() in the content property displays the value. The counter-reset property creates a new counter instance: counter-reset: section. counter-increment advances it: counter-increment: section. The content property on a ::before pseudo-element displays the counter: content: counter(section). The counter() function accepts an optional style argument: counter(section, upper-roman). For nested counters, each level resets its own sub-counter. The counters() function (note the 's') handles nested scopes: counters(section, ".") produces "1.2.3" notation. Available list-style-types include decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek, and more. Multiple counters can be defined and used independently.
Tips & Best Practices
-
1Use counter-reset on the parent element, counter-increment on children
-
2Use counters() with a separator for nested numbering like 1.1.1
-
3Custom prefix and suffix text makes counters suitable for legal documents
-
4CSS counters work with any element, not just lists
Related Tools
CSS Table Generator
Build beautifully styled HTML tables with customizable colors, stripes, and hover effects.
🎨 CSS & Design
Typography Scale Generator
Generate a modular typographic scale with customizable base size, ratio, and units.
🎨 CSS & Design
CSS Variable Generator
Generate CSS custom properties (variables) for colors, spacing, and typography.
🎨 CSS & Design
Print Stylesheet Generator
Generate @media print stylesheets with options to hide elements, style text, and control page breaks.
🎨 CSS & DesignFrequently Asked Questions
Q What is the difference between counter() and counters()?
Q Can I use CSS counters on any element?
Q How do I reset the counter?
Q Can I start counting from a specific number?
Q Are CSS counters accessible?
About This Tool
CSS Counter Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.