CSS counter-set Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS counter-set property jumping a numbered list to a new absolute value
Definition

Definition and Usage

The counter-set property sets one or more named CSS counters to absolute integer values on that element. A bare name sets the counter to 0. Use it to jump or restart numbering mid-document after counter-reset and counter-increment.

Print the value with content and counter(). The initial value is none. It is not inherited. Prefer counter-reset to create a counter; use counter-set to change its value later.

Baseline · Widely available.

Not deprecated and not experimental. Cross-browser since Safari 17.2 (December 2023). Not supported in Internet Explorer.

Order tip.

On the same element, counter-set runs before counter-increment. So counter-set: section 9 plus a normal +1 prints 10.

Syntax

CSS Syntax

syntax.css
counter-set: [ <counter-name> <integer>? ]+ | none | initial | inherit;

List one or more counter names, each optionally followed by an integer. Omit the integer to set the counter to 0.

Values

Property Values

ValueDescriptionTry it
<counter-name>Sets that counter to 0 on the elementTry it
name + integerSets the counter to that integer, such as section 9Try it
Negative integerSets below zero, such as section -1Try it
Mid-list jumpApply set on one item so later items continue from the new valueTry it
noneDo not change any counters. Initial valueTry it
initialSets this property to its default value, noneTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use counter-set

Create with reset, count with increment, jump with set when you need a new absolute value.

  1. On a parent, set counter-reset: section.
  2. On each numbered item, set counter-increment: section.
  3. On the item that should jump, add counter-set: section 9 (or another integer).
  4. Print with content: counter(section) on ::before or ::after.
PieceRequired?Role
counter-resetRecommendedCreates the counter with a clear start
counter-incrementUsuallyAdvances the counter on each item
counter-setFor jumpsAssigns an absolute value on one element
content: counter(...)To display itWrites the current value into generated content
Try it

Live Preview

Four lines share one counter. Change counter-set only on the third line. Remember: set runs before increment.

Parent uses counter-reset: section. Every line still uses counter-increment: section.

Numbered lines

First

Second

Third

Fourth

counter-set: none on the third line

Code

CSS Examples

Each snippet keeps CSS lean: reset, increment, and one counter-set jump. Use Try It Yourself for a live editor.

Example 1 — Jump Ahead

Set the counter on one heading so numbering leaps forward.

CSS
<style>
  body {
    counter-reset: section;
  }

  h2 {
    counter-increment: section;
  }

  h2.jump {
    counter-set: section 9;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<h2>One</h2>
<h2>Two</h2>
<h2 class="jump">Ten</h2>
<h2>Eleven</h2>
Try It Yourself

How It Works

  1. Create the counter. counter-reset: section starts at 0.
  2. Count normally. The first two headings become 1 and 2.
  3. Jump on purpose. counter-set: section 9 sets the third heading to 9, then increment makes it 10.
  4. Continue. The fourth heading increments to 11.

Example 2 — Restart Mid-List

A bare name sets the counter to 0, so the next printed value is 1 again.

CSS
<style>
  body {
    counter-reset: section;
  }

  h2 {
    counter-increment: section;
  }

  h2.restart {
    counter-set: section;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<h2>One</h2>
<h2>Two</h2>
<h2 class="restart">One again</h2>
<h2>Two again</h2>
Try It Yourself

How It Works

  1. Count as usual. The first two headings print 1 and 2.
  2. Set to zero. counter-set: section assigns 0 on the restart heading.
  3. Increment still runs. That same heading then becomes 1.
  4. Keep going. The next heading becomes 2. No new nested reset scope is needed.

Example 3 — Set Then Continue

Jump on the second item; later items keep adding from there.

CSS
<style>
  body {
    counter-reset: section;
  }

  h2 {
    counter-increment: section;
  }

  h2.jump {
    counter-set: section 4;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<h2>First</h2>
<h2 class="jump">Five</h2>
<h2>Six</h2>
Try It Yourself

How It Works

  1. First item. Normal increment prints 1.
  2. Second item jumps. counter-set: section 4 then +1 prints 5.
  3. Third item continues. Another +1 prints 6.
  4. Use case. Pick a known number mid-document without wrapping a new reset parent.

Edge Cases & Pitfalls

Most surprises come from set-then-increment order or mixing set with reset.

order

Set runs before increment

If both apply on one element, the counter is assigned first, then increased. Plan the integer one step below the number you want to print.

create

Prefer reset to create counters

counter-set can create a missing counter, but counter-reset is the clearer create step.

scope

Set is not a nested reset

A nested counter-reset starts a new scope. counter-set changes the current counter value in place.

display

Nothing shows without content

You still need content and counter() on a pseudo-element to print the number.

support

Newer than classic counters

counter-reset and counter-increment work in old browsers. counter-set needs modern ones (no IE; Safari 17.2+).

Compatibility

Browser Support

counter-set is a browser CSS property for assigning counter values. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

counter-set

Supported in modern browsers since Safari 17.2 (December 2023). Not available in Internet Explorer.

96% Modern support
Google Chrome 85+
Full support
Mozilla Firefox 68+
Full support
Apple Safari 17.2+
Full support
Microsoft Edge 85+
Full support
Opera 71+
Full support
Samsung Internet 14+
Full support
Internet Explorer —
No support
counter-set Modern browsers

Bottom line: Safe for modern sites when you need mid-document numbering jumps. For IE-era support, stick to counter-reset and counter-increment. It is not a runtime API.

Remember

Key Takeaways

  • Role: assign absolute values to named CSS counters on an element.
  • Default: a bare name sets the counter to 0. Initial property value is none.
  • Order: set before increment on the same element — plan the integer one step low.
  • Create vs jump: use counter-reset to create; use counter-set to jump.

One line: counter-set jumps the counter to a value — then increment and content show the new sequence.

Frequently Asked Questions

It sets one or more named CSS counters to absolute integer values on that element. If you omit the integer, the counter is set to 0.
The initial value is none, which means no counter values are changed on that element.
counter-reset creates and initializes a counter (usually on a parent). counter-set jumps an existing counter to a value at a specific element. Prefer reset to create; use set to jump mid-document.
On the same element, counter-set runs before counter-increment. The counter becomes 9, then increment adds 1, so the printed value is 10.
Yes, it can create one if needed, but MDN recommends counter-reset when you want to create a counter on purpose.
It is Baseline and widely available in modern browsers (Chrome 85+, Firefox 68+, Safari 17.2+, Edge 85+). It is not supported in Internet Explorer. It is a browser CSS property, not a Node.js feature.

Next: cursor

Learn how to change the mouse pointer style for interactive elements.

cursor tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS counter-reset Property CSS cursor Property