CSS `counter-increment` Property

Example

Method for numbering sections and subsections (e.g., "Section 1", "1.1", "1.2"):

body
{
    counter-reset:section;
}

h1
{
    counter-reset:subsection;
}

h1:before
{
    counter-increment:section;
    content:"Section " counter(section) ". ";
}

h2:before 
{
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

Property Definition and Usage

The counter-increment property increments one or more counter values.

The counter-increment property is typically used with the counter-reset and content properties.

Default value:	none
Inherited:	no
---	---
Version:	CSS2
---	---
JavaScript syntax:	object.style.counterIncrement="subsection"
---	---

Browser Support

All major browsers support the counter-increment property.

Note: IE8 supports the counter-increment property only if a !DOCTYPE is specified.

Property Values

Value	Description
none	No counter will be incremented
id number	id defines the selector, id, or class that will increment the counter. number defines the increment. number can be a positive number, zero, or a negative number.
inherit	Specifies that the value of the `counter-increment` property should be inherited from the parent element

CSS Reference: :before Pseudo-element

CSS Reference: :after Pseudo-element

CSS Reference: content Property

CSS Reference: counter-reset Property

❮ Pr Text Word Spacing Pr Import Rule ❯

CSS counter-increment Property

Example

Property Definition and Usage

Browser Support

Property Values

Related Articles

CSS `counter-increment` Property