CSS Counter Style Generator

Build @counter-style rules visually with a live ordered-list preview.

Presets:

CSS Length: 104 charsSystem: cyclicSymbols Defined: 2

Counter name

System

Symbols (space-separated, e.g. ◦ •)

Prefix

Suffix

Fallback

Pad length (0=off)

Pad char

Generated CSS

@counter-style my-counter {
  system: cyclic;
  symbols: "◦" "•";
  suffix: ". ";
  fallback: decimal;
}

Live Preview

First item
Second item
Third item
Fourth item
Fifth item
Sixth item
Seventh item
Eighth item

CSS @counter-style Generator

The CSS @counter-style at-rule lets you define custom list markers beyond the built-in styles. You can use any Unicode character as a symbol, define additive systems (like Roman numerals), extend existing styles, and control prefix, suffix, fallback, and zero-padding. The live preview shows how your counter looks on an eight-item ordered list using the exact CSS you generated. All processing runs in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing a custom list marker without pseudo-element hacks.
Building a numbering system that matches a document convention.
Getting a symbolic or alphabetic counter for an ordered list.
Adding a suffix or a prefix to list numbering.
Comparing counter styles with a live list preview.

Frequently Asked Questions

What does @counter-style let me define?: A custom numbering system for lists and counters — the symbols, the system that generates them, an optional prefix and suffix, and a fallback. It is how you get emoji bullets, a bespoke alphabet, or a numbering scheme CSS has no built-in name for.
What are the main counter systems?: `cyclic` repeats the symbols forever, `fixed` uses them once and then falls back, `symbolic` repeats each symbol an increasing number of times, `alphabetic` and `numeric` count in a positional base, and `additive` handles systems like Roman numerals where symbols combine.
Why does a custom style need a fallback?: Because most systems run out. A `fixed` style with five symbols has nothing for the sixth item, and `alphabetic` needs at least two symbols to work at all. The fallback — `decimal` by default — is what renders when the system cannot produce a representation.
Are custom bullets announced by screen readers?: Inconsistently, and that is the reason to be careful. Some read the symbol literally, which turns a decorative emoji into spoken noise before every item. Where the marker carries no meaning, `speak-as: numbers` or a plain style is kinder than a clever one.
Can counters be used outside lists?: Yes — `counter-reset`, `counter-increment` and the `counter()` function work on any element, which is how numbered headings, figure captions and print page numbers are built. A custom `@counter-style` applies to those the same way it applies to a list marker.

Common errors and gotchas

Assuming universal support, since `@counter-style` is not available everywhere.
Choosing a symbol set shorter than the list, which then cycles or falls back.
Removing the marker's semantic meaning, which screen readers rely on for ordered lists.
Using a counter style where the numbering carries meaning that must be selectable text.
Forgetting a fallback style, which leaves unsupported browsers with no marker at all.