ZeroServer.tools

CSS Counter Style Generator

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

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.

Private & free — this tool runs entirely in your browser.