CSS @counter-style Generator

Create custom list markers with CSS @counter-style. Configure the system, symbols, and more, then preview and copy.

Presets:

Emoji Fruits

Arrows

Custom Roman

Star Rating

Checkmarks

Dice

Greek Alpha

Configuration

Style Name System Symbols (space-separated) Suffix Prefix

Range Start

Range End

Fallback speak-as

Live Preview

First item in the list
Second item here
Third list item
Fourth entry
Fifth item
Sixth and beyond
Seventh item
Eighth item

Generated CSS

Copied!