
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 Standard | Internet Explorer | Netscape 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 Standard | Internet Explorer | Netscape Navigator |
CSS2 and later |
Not supported |
Not supported |
-
Notes:
- none
Doesn't increment the counter.
-
Support:
-
W3C Standard | Internet Explorer | Netscape 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
|
|