Expand All | Collapse All

CSS counter-increment Property

Topic: CSS3 Properties ReferencePrev|Next


The counter-increment CSS property increments one or more counter values. This property is very useful for creating auto-numbering feature.

The following table summarizes the usages context and the version history of this property.

Default value: none
Applies to: All elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 2, 3


The syntax of the property is given with:

[ identifier integer ]1 or more pairs | none | initial | inherit

The example below shows the counter-increment property in action.

body {
    counter-reset: section;
h1 {
    counter-reset: category;
h1:before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
h2:before {
    counter-increment: category;
    content: counter(section) "." counter(category) " ";

Property Values

The following table describes the values of this property.

Value Description
identifier The name of the counter to increment.
integer The value to add to the counter. The default increment is 1. Zero or negative values are allowed.
none No counters will be incremented. This is default value.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element direction property.

Browser Compatibility

The counter-increment property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1.5+
  • Google Chrome 2+
  • Internet Explorer 8+
  • Apple Safari 3+
  • Opera 9.2+

Further Reading

See tutorial on: CSS Pseudo Elements.

Related properties: content, counter-reset.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties