CSS counter-set Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS counter-set property is used to set the value of a CSS counter. Counters are like variables that can be used to track different things, such as the number of headings in a document, the number of items in a list, or even the current year. The counter-set property takes two arguments: the name of the counter and the value to set it to. The counter name can be any valid CSS identifier. The value can be any integer, including negative numbers. If the counter does not already exist, the counter-set property will create it. If the counter already exists, the counter-set property will set its value to the specified value.

Initial value: none
Applies to: All elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.counterSet

Interactive Demo

Learning CSS

Forward
Introduction to CSS
Color
Text
The Box Model
Lists

Syntax

counter-set: [ <custom-ident><integer>? ]+ | none

Values

noneThis element does not alter the value of any counters.
<custom-ident><integer>?The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

Example

HTML

<h2>Chapter title</h2> 

<h3>Article</h3> 

<h3>Article</h3>

<h3>Article</h3>

<h2>Chapter title</h2> 

<h3>Article</h3> 

<h3>Article</h3> 

<h3>Article</h3> 

<h2>Chapter title</h2> 

<h3>Article</h3>

<h3>Article</h3>

<h3>Article</h3>

CSS

body {
   counter-reset: counter1; 
   line-height: .3em;
}
h2 {
   counter-reset: counter2; 
 }
h2::before { 
   counter-increment: counter1;
   content: "Chapter No. " counter(counter1) ". "; 
   counter-set: counter1 5
}
h3 {
   margin-left: 20px; 
}
h3::before { 
   counter-increment: counter2;
   content: counter(counter1) "."  counter(counter2) " " ; 
}

Result

Editor