CSS Counter Generator
Generate CSS counter styles for custom ordered lists. Configure counter name, style, prefix, suffix, start value, increment, and nested counters for multi-level lists.
How to Use CSS Counter Generator
The CSS Counter Generator creates ready-to-use CSS code for custom ordered list numbering. Configure the counter name, numbering style (decimal, roman, alpha, etc.), prefix and suffix text, start value, and increment. Enable nested counters for multi-level lists that display hierarchical numbering like 1.1, 1.2, 2.1. The generated CSS uses counter-reset, counter-increment, and the content property with counter() or counters() functions. Copy the code directly into your stylesheet.
Step-by-Step Instructions
- Set the counter name and choose a numbering style
- Configure prefix, suffix, start value, and increment
- Optionally enable nested counters for multi-level lists
- Click Generate CSS and copy the result
Related Tools
JSON Formatter and Validator
Format, validate, and pretty-print JSON with syntax highlighting.
Base64 Encoder and Decoder
Encode text to Base64 or decode Base64 strings back to plain text.
URL Encoder and Decoder
Encode special characters for URLs or decode percent-encoded strings.
HTML Entity Encoder and Decoder
Encode special characters as HTML entities or decode them back.