Counter Style Preview

Preview CSS @counter-style systems — decimal, roman, alpha, emoji — with prefix/suffix controls.

Counter System

Style

Marker Color

Font Size16px

Items to show6

Start at1

Bold markers

Prefix & Suffix

Prefix

Suffix

Preview

1.. List item number 1
2.. List item number 2
3.. List item number 3
4.. List item number 4
5.. List item number 5
6.. List item number 6

Generated CSS

@counter-style custom-decimal {
  system: extends decimal;
  prefix: "";
  suffix: ". ";
}

ol {
  list-style-type: custom-decimal;
}

ol li::marker {
  color: #6366f1;
  font-size: 16px;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Counter Style Preview?

Preview all CSS list-style-type values and @counter-style rule patterns. See how numbered and bulleted lists render before adding them to your stylesheet.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Counter Style Preview

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Browse built-in styles

All CSS predefined counter style keywords are previewed with a live list example.

Build a custom @counter-style

Configure system (cyclic, fixed, numeric, alphabetic), symbols, and suffix to build a custom counter style.

Copy the CSS

Click Copy to get the list-style-type value or the full @counter-style rule.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

counter-styles.css

/* Built-in counter styles */
ol.decimal        { list-style-type: decimal; }         /* 1, 2, 3 */
ol.lower-roman    { list-style-type: lower-roman; }     /* i, ii, iii */
ol.upper-alpha    { list-style-type: upper-alpha; }     /* A, B, C */
ol.lower-greek    { list-style-type: lower-greek; }     /* α, β, γ */

/* Custom counter style */
@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul.thumbs-list { list-style-type: thumbs; }

@counter-style is supported in Chrome 91+, Firefox 33+. Safari added support in Safari 17. For Safari 16 and below, @counter-style falls back to decimal.

Pro tips

Pro tips for better results

★

Use @counter-style for emoji and icon lists

@counter-style with system: cyclic and an emoji symbol creates emoji bullet lists without background-image hacks or pseudo-elements.

FAQ

Frequently asked questions

Yes. Apply list-style-type: your-counter-name to an ol element. The custom counter replaces the default decimal numbers.

system defines how the counter iterates. cyclic repeats the symbols list. fixed uses each symbol once. numeric treats symbols as digits in a positional number system. alphabetic uses symbols as an alphabetic sequence.