How do I use a counter style?

Set list-style-type to the style name on an ol or ul, for example list-style-type: upper-roman. You can also reference a style inside generated content with the counter() function, such as content: counter(item, lower-alpha). Custom styles defined via @counter-style work in both places.

What does the system descriptor control?

system selects the counting algorithm: cyclic repeats symbols, numeric is positional like decimal, alphabetic is bijective base-N, symbolic adds a symbol per cycle, additive sums weighted symbols like Roman numerals, fixed runs once, and extends inherits another style. It is the required descriptor in every @counter-style rule.

What is the range descriptor for?

range limits the counter values a style applies to. Outside that range the browser uses the fallback style. For example Roman numerals have no representation for zero or negatives, so a range and a decimal fallback keep those values readable.

How does the pad descriptor work?

pad sets a minimum marker length and the symbol used to fill shorter values, like the built-in decimal-leading-zero. pad: 3 '0' renders 1 as 001 and 42 as 042, while values already at or above the length are left unchanged.

Does the live renderer match every browser?

The renderer reproduces the decimal, leading-zero, Roman and alphabetic algorithms exactly as the CSS spec defines them, so the output matches conforming browsers. It runs entirely in your browser and sends nothing anywhere.

CSS @counter-style Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Numbering and bullets, your way

CSS list markers are not limited to 1. and •. A large set of predefined counter styles cover numeric, alphabetic, Roman, Greek, CJK and symbolic numbering, and the @counter-style at-rule lets you invent your own. This reference lists the common built-ins, the rule’s descriptors, and renders a number into several styles live.

How it works

A counter style maps an integer to a marker string. The built-ins fall into families: numeric (positional, like decimal), alphabetic (bijective base-N letters), additive (weighted symbols summed together, like Roman numerals and Hebrew), and symbolic (a fixed glyph such as disc). The live demo above implements the real algorithms: bijective base-26 for lower-alpha, subtractive Roman assembly for upper-roman, and zero-padding for decimal-leading-zero.

To define a custom style, write @counter-style name { system: …; symbols: …; }. The system chooses the algorithm, symbols or additive-symbols supply the glyphs, and range, pad, negative, prefix, suffix and fallback refine the output. Outside the declared range, or for unrepresentable values, the fallback style (default decimal) takes over.

Tips and examples

Apply a style with list-style-type, or reuse it anywhere via the counter() and counters() functions in content.
Always set a sensible range and fallback for additive styles so zero and large numbers stay legible.
system: extends decimal is the easy way to tweak only the prefix or suffix of an existing style without re-listing every symbol.
Predefined symbolic markers (disc, circle, square) ignore the counter value — they repeat the same glyph for every item.