CSS Counters

Using Counters

counter-reset creates or resets a counter.

counter-increment increases counter value.

counter() or counters() displays the value.

Use with ::before or ::after pseudo-elements.

Useful for automatically numbering sections, steps, or items.

/* Automatic section numbering */
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

/* Nested counters */
ol {
  counter-reset: item;
  list-style: none;
}

li::before {
  counter-increment: item;
  content: counter(item) ". ";
}

/* Custom step counter */
.steps {
  counter-reset: step;
}

.step::before {
  counter-increment: step;
  content: "Step " counter(step);
  background: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 10px;
}