Describe the CSS `counter-reset` and `counter-increment` properties

CSS' counter-reset and counter-increment are used to automatically number HTML elements. 1. Use counter-reset to initialize or reset the counter, for example, section { counter-reset: sub-section;} to create a counter named sub-section; 2. Increment the counter through counter-increment, such as h3 { counter-increment: sub-section;} to increment each h3 title number; 3. Use the content attribute to display the counter in combination with pseudo-elements, such as h3::before { content: counter(section) "." counter(sub-section);} to implement nested numbers. These functions are suitable for scenarios such as automatic generation of title numbers, custom list styles, multi-level numbers and UI progress indicators, and complex layout logic can be completed without JavaScript.

If you've ever wanted to automatically number headings, list items, or sections in your HTML using just CSS, counter-reset and counter-increment are the tools you need. These properties let you create and manipulate counters directly in your stylesheets — no JavaScript required.

What Are Counters in CSS?

At their core, CSS counters are variables maintained by the browser that can be incremented and displayed. They're especially useful for things like numbered headings, ordered lists, or multi-level numbering (like 1.1, 1.2, 2.1, etc.).

You don't declare them like variables in JavaScript. Instead, you "initialize" them with counter-reset and "update" them with counter-increment .

How to Use counter-reset

The counter-reset property is used to create a new counter or reset an existing one to a specific value (default is 0).

For example:

 section {
  counter-reset: sub-section;
}

This creates a counter called sub-section and resets it every time a new section starts — which is perfect for nested numbering.

You can also set it to start at a different number:

 section {
  counter-reset: sub-section 5;
}

Now, the first sub-section inside this section will start at 6 (because counter-increment typically adds 1 by default).

A few things to keep in mind:

• Counters are scoped to the element they're defined on and its children.
• You can define multiple counters in one declaration:

   counter-reset: section 0 sub-section 0;

How to Use counter-increment

Once a counter exists, you use counter-increment to increase its value . This is usually applied to elements that should trigger a number change — like subscriptions or list items.

Example:

 h3 {
  counter-increment: sub-section;
}

Each time an h3 appears inside a parent that has a sub-section counter, it increases that counter by 1.

Like counter-reset , you can increment multiple counters at once:

 h2 {
  counter-increment: section sub-section 2;
}

Here, section increases by 1, and sub-section jumps up by 2.

Important note: By default, counter-increment increases by 1 unless specified otherwise.

Displaying Counters with content

Creating and updating counters isn't enough — you also need to show them. That's where the content property comes in, often used with ::before or ::after pseudo-elements.

Example:

 h3::before {
  content: "Section " counter(sub-section) ": ";
}

This would display something like “Section 2:” before each h3 .

For nested counters (like chapter and subscription), you can do:

 h3::before {
  content: counter(section) "." counter(sub-section) " ";
}

That gives you output like “2.1”, “2.2”, etc., depending on how many times each counter was reset and incremented.

Common Use Cases

Here are some practical scenarios where these properties shine:

• Auto-numbered headings : Perfect for documentation sites or long-form content.
• Custom list styling : You can build your own ordered lists without relying on <ol></ol> .
• Multi-level counters : Like 1.1, 1.2, 2.1, etc., great for technical specs or legal documents.
• Visual indicators : Counters can help track progress visually in UI components.

Just remember:

• Always reset a counter before using it.
• Increment only when needed.
• Don't forget to display it with content .

That's basically how counter-reset and counter-increment work. It might seem a bit abstract at first, but once you get the hang of scoping and nesting, they become powerful tools for layout logic.

The above is the detailed content of Describe the CSS `counter-reset` and `counter-increment` properties. For more information, please follow other related articles on the PHP Chinese website!