counter-increment
The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter’s value can be reset using the counter-reset CSS property.
Values
<user-ident>
The name of the counter to increment.
<integer>
The value to add to the counter. Defaults to 1 if not given.
none
No counter must be incremented. This is used as the default value, or to cancel an increment in more specific rules.
You may specify as many counters to increment as you want, each separated by a space.
Example
<!DOCTYPE html>
<html>
<head>
<style>
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) " ";
}
</style>
</head>
<body>
<p>
<b>Note:</b>
IE8 supports these properties only if a !DOCTYPE is specified.
</p>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
</html>
