The cover of The Complete Idiot's Guide to Create a Web Page The Complete Idiot's Style Sheets Reference

| Index | Current Category: Generated Content |
| Previous Style: content | Next Style: counter-reset |


counter-increment

Increments the value of a counter.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported
Notes:
  • This property can only be used within a STYLE block or an external style sheet. You can't use it as an inline style.
  • If you want the generated content to appear before the current element, add :before after the name of the tag (see the example).
  • If you want the generated content to appear after the current element, add :after after the name of the tag.

See Also:

content, counter-reset

Possible Values:

[name]
The name of the counter to increment.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported

Notes:
  • By default, the counter is incremented by one. If you want to increment the counter by another value, even a negative number (decrement), add the number to this value, like so:

    H1:before {counter-increment: section 10}

none
Doesn't increment the counter.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported

Example:
The following style sheet keeps track of two counters named section and subsection. The section counter is associated with the <H1> heading. Before each <H1> heading, the counter is incremented, the string "Section " and the counter's current value are written using the content property, and the subsection counter is reset to 0.  Similarly, the subsection counter is associated with the <H2> heading. Before each <H2> heading, the counter is incremented, and both the current section number and the string "Subection " with the counter's current value are written using the content property.
<STYLE TYPE="text/css">
<!--
H1:before {content: "Section " counter(section);
         counter-increment: section;
         counter-reset: subsection}

H2:before {content: "Section " counter(section) ", Subsection " counter(subsection);
         counter-increment: subsection}
-->
</STYLE>

| Index | Current Category: Generated Content |
| Previous Style: content | Next Style: counter-reset |