CSS Counter Generator

Generate CSS counters for automatic numbering of headings, lists, and other elements. Create custom numbering systems.

Counter Configuration

Counter Name

Numbering Style

Enable Counter Reset

Reset Selector

Reset Value: 0

Increment Selector

Increment Value: 1

Content Format

Display Selector

Custom Prefix

Custom Suffix

Quick Presets

Live Preview

1Heading Text 1

2Heading Text 2

3Heading Text 3

4Heading Text 4

5Heading Text 5

Generated CSS

body {
  counter-reset: section 0;
}

h2 {
  counter-increment: section 1;
}

h2::before {
  content: counter(section);
}

HTML Example

<body>
  <h2>Introduction</h2>
  <h2>Getting Started</h2>
  <h2>Advanced Usage</h2>
  <h2>Conclusion</h2>
</body>

About CSS Counters

CSS counters are variables that can be incremented by CSS to automatically number elements like headings, list items, or sections. They're controlled by three main properties: counter-reset, counter-increment, and the counter() function.

CSS counters are perfect for creating automatic section numbering, multi-level lists, and custom numbering schemes without JavaScript or manual updates.

Counter Properties

counter-reset

Initializes or resets a counter. Set on a parent element to start counting from a specific value.

counter-reset: section 0;

counter-increment

Increases the counter value. Set on elements that should trigger numbering.

counter-increment: section 1;

counter()

Displays the counter value in content. Used with ::before or ::after pseudo-elements.

content: counter(section);

Counter Styles

decimal

1, 2, 3

lower-roman

i, ii, iii

upper-roman

I, II, III

lower-alpha

a, b, c

upper-alpha

A, B, C

decimal-leading-zero

01, 02, 03

Other Free Tools

Search tools

CSS Counter Generator

About CSS Counters

Counter Properties

Counter Styles

Other Free Tools

Media Query Builder

CSS Grid Generator

Flexbox Playground

CSS Minifier & Beautifier

CSS Variable Extractor

CSS Specificity Calculator

CSS calc() Builder

PX to REM Converter

Fluid Space Calculator

Fluid Typography Calculator

Viewport Unit Converter

Print CSS Helper

Scroll Snap Builder

CSS Spacing Scale Generator

CSS Filter Generator

CSS Gradient Generator

CSS Mesh Gradient Generator

CSS Pattern Generator

CSS Background Noise Generator

CSS Border Radius Generator

CSS Box Shadow Generator

Glassmorphism Generator

Neumorphism Generator

CSS Button Generator

CSS Loader Generator

CSS Animation Generator

CSS Transition Previewer

Cubic Bezier Editor

CSS Clip Path Maker

CSS Shape Generator