🔢 CSS

CSS Counters — Automatic Numbering Without Ordered Lists

📅 Jul 3, 2026 ⏱ 2 min read

Number steps, headings or FAQ items automatically — reorder the HTML and the numbers fix themselves.

Basic numbering

.steps { counter-reset: step; }           /* create/reset on the container */
.step::before {
  counter-increment: step;                 /* +1 per item */
  content: "Step " counter(step) ": ";
  color: #6d6ffb; font-weight: 700;
}

Nested (1.1, 1.2, 2.1…)

article { counter-reset: h2; }
h2 { counter-reset: h3; }
h2::before { counter-increment: h2; content: counter(h2) ". "; }
h3::before { counter-increment: h3; content: counter(h2) "." counter(h3) " "; }

Styled number badges

.faq-item::before {
  content: counter(faq);
  counter-increment: faq;
  display: inline-grid; place-items: center;
  width: 28px; aspect-ratio: 1; border-radius: 50%;
  background: #6d6ffb; color: #fff;
}

Formats too: counter(step, upper-roman) → I, II, III. The numbered sections in our Complete Guides could be done exactly this way.

← All Articles