CP

CSS Counter Style Preview

Home/Tools/Counter Style Preview

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

No sign-up neededRuns in your browserProduction-ready CSS

Counter System

Style

16px
6
1

Prefix & Suffix

Preview

  1. 1.. List item number 1
  2. 2.. List item number 2
  3. 3.. List item number 3
  4. 4.. List item number 4
  5. 5.. List item number 5
  6. 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;
}

Related Tools

CSS Variables Generator

Create and organize CSS custom properties for your design system.

Media Query Generator

Generate responsive media queries for all device sizes.

Z-Index Visualizer

Visualize and manage z-index stacking contexts.