CSS counter-increment

The CSS counter-increment property assists in generating automatic numbering (for example, Heading 1, Section 1.1, Heading 2, Heading 2.2 etc) by incrementing the count by a given number. The counter-increment property is used in conjunction with the CSS count() function of the 'content' property (which is used with the ':before' or ':after' pseudo-elements).

Syntax:

content: "<string> " counter(<identifier>) " ";
counter-increment: <identifier> <integer>;

Possible Values:

none
<identifier> <integer>
The integer indicates how much the count is incremented by. The default is 1. Zero and negative integers are allowed.
inherit

Initial Value:

None

Applies to:

All elements

Inherited:

Media:

All

Example:


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

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/css/properties/css_counter-increment.cfm">CSS counter-increment</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites