CSS counter-set

The counter-set property in CSS allows you to create or reset a counter to a specified value. This can be useful when you want to start a counter at a specific number or reset it to zero at a certain point in your document.

Let's take a look at how to use the counter-set property with some examples.

Syntax


counter-set: counter_name value;

The counter-set property takes two values: the name of the counter (counter_name) and the value to set the counter to (value).

Examples

Result:

This is an example of how to use the counter-set property in CSS:


  body {
    counter-reset: section;
  }

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

Explanation

In this example, we first reset the counter named section to 0 on the body element. Then, we set the value of the section counter to 10 using the counter-set property on the h2 element. Finally, we use the content property to display the value of the counter before the content of the h2 element.

When the above CSS is applied to an HTML document, it will display headings with the prefix Section 10:.