CSS Property counter-increment

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

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

Ordered list is not the only elements that can be automatically numbered. With the various counter-related properties, any element can be numbered.

Summary

Initial value: none
Inherited: no
CSS Version: CSS2
JavaScript syntax: object.style.counterIncrement = "subsection";
Animatable: no

CSS Syntax

counter-increment: none|id|initial|inherit;

Property Values

none: Default value. No counters will be incremented
id number: The id sets which counter to increment. The number sets the step that the counter will increment on each occurrence.
The default increment is 1.
0 or negative values, are allowed.
If the id refers to a not-initialized counter by counter-reset,
the default initial value is 0.
initial: sets to default value
inherit: Inherits this property from its parent element

Browser compatibility


`counter-increment`	Yes	8.0	Yes	Yes	Yes

Steps to create counter

To create a counter, you use the special counter-reset property and set the value to be the name you want to use for the counter, like this:

counter-reset: myCounter;

The code above initializes a counter called myCounter and sets the value to 1.

You can specify a different initial value like this:

counter-reset: myCounter 10;

If you want to define multiple counters, you simply add the names and optional initial values to the same counter-reset declaration, like this:

counter-reset: myCounter 10 othercounter;

The code above creates a counter called myCounter with an initial value of 10 and a counter called othercounter with an initial value of 1.

Then you can use the counter with the :before and :after selectors, like this:

p:before {
  content: counter(myCounter) ". ";
  counter-increment: myCounter;
}

It will include the current value of the counter before every element that the selector matches and append a period and a space after each value.

You can specify other numeric formats as well, like this:

content: counter(myCounter, lower-alpha) ". ";

You may use any of the supported values for the list-style-type property.

You increment the counter using the special counter-increment property. The value for this property is the name of the counter you want to increment, like this:

counter-increment: myCounter;

Counters are incremented by one by default, but you can specify a different increment by adding the step size you want to the declaration, like this:

counter-increment: myCounter 2;

Example

An example showing how to use counter-increment CSS property.

<!DOCTYPE HTML>
<html>
<head>
    <style>
 p:before {<!--   www  .  j  a v a2  s .  c  o m-->
      content: counter(paragraphNumber, upper-roman) ": ";
 }
 
 h1 {
      counter-reset: paragraphNumber;
 }
 
 p {
      counter-increment: paragraphNumber;
 }
    </style>
</head>
<body>
    <h1>Heading One</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
    <h1>Heading Two</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
    <h1>Heading Three</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
</body>
</html>

Click to view the demo

Example 2

The following code adds contents before counter.

<!DOCTYPE html>
<html>
<head>
<style>
body {<!--   w  w  w . j  av  a 2 s  .  co  m-->
    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) " ";
}
</style>
</head>

<body>

<h1>A</h1>
<h2>A</h2>
<h2>A</h2>
<h2>A</h2>
<h1>A</h1>
<h2>A</h2>
<h2>A</h2>
<h1>A</h1>
<h2>A</h2>
<h2>A</h2>

</body>
</html>

Click to view the demo