counter-set

Definition

The counter-set CSS property requires additional documentation.

Syntax

.steps {
  counter-set: step 4;
}

Values

<name> <integer> pairs to define or override counter values without resetting siblings.

Practical Examples

.steps {
  counter-reset: step;
}

.steps__item {
  counter-increment: step;
}

.steps__item.is-complete {
  counter-set: step var(--completed-step);
}

Adjust counter values mid-sequence without clearing the entire counter.

HTML

Capture requirements
Design workflow
Launch (counter set to custom value)

Code

<style>
.steps { counter-reset: step; list-style:none; padding-left:0; }
.steps__item { counter-increment: step; position: relative; padding-left: 2.5rem; margin-bottom:0.75rem; }
.steps__item::before { content: counter(step); position:absolute; left:0; top:0; width:2rem; height:2rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(34,197,94,0.15); color:#16a34a; font-weight:600; }
.steps__item.is-complete { counter-set: step var(--current-step); }
</style>
<ol class="steps text-sm text-slate-700" style="--current-step: 4;">
  <li class="steps__item">Capture requirements</li>
  <li class="steps__item">Design workflow</li>
  <li class="steps__item is-complete">Launch (counter set to custom value)</li>
</ol>

Tips & Best Practices

Use CSS variables with counter-set to dynamically adjust numbering.
Great for resetting counters in summary rows without disturbing the main sequence.

Accessibility & UX Notes

Ensure the visual numbering aligns with the logical order communicated to assistive technologies.

Browser Support

Supported in modern browsers (Chrome 85+, Firefox 68+, Safari 13.1+).

counter-reset
counter-increment
content.