CSS Reference

CSS counter-increment property


The CSS counter-increment property increments one or more counters set with the content CSS property.

Applies To

All elements.

Property Values

negative values are acceptable.

identifier integer - Identifies the counter to be incremented. If an integer is also used it specifies the increment value for each use. Default increment value is 1. Default starting value for counters that haven't been reset is 0.

inherit - The counter-increment properties are inherited from the parent element.

none - Any counters specified are not incremented.

Default Value

Default value is set to none.


The counter-increment property is NOT inherited from the parent element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"  
<!-- Our HTML/CSS for the CSS counter-increment property follows -->
<html  xmlns="https://www.w3.org/1999/xhtml/">
<title>CSS Reference - CSS counter-increment Property</title>

<!-- Valid values for CSS counter-increment Property are:

     identifier integer, inherit and none.


<style type="text/css">

/* Set section counter on initial entry */
body {
  counter-reset: section;

/* Reset lesson every time we hit a h2 tag */
h2 {
  counter-reset: lesson;

/* Create generated content before our h2 tags */
h2:before {
  counter-increment: section;
  content: "Section " counter(section) ". ";

/* Increment lesson counter and generate content before our h3 tags */
h3:before {
  counter-increment: lesson;
  content: counter(section) "." counter(lesson) " ";


<h1>The CSS counter-increment Property</h1>
<h2>HTML5 Basics</h2>
<h3>Starting Out</h3>
<h3>Basic HTML Structure</h3>
<h2>HTML4 Intermediate</h2>
<h3>What is XHTML</h3>
<h3>More HTML Structure</h3>
<h2>HTML4 Advanced</h2>

How It Looks

The results of using the counter-increment property with the values above will look something like the following:

CSS content    << Prev          Next >>   CSS counter-reset

go to home page Homepage go to top of page Top