Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML

Print Version

CSS counter-increment

Also see the full, alphabetical list of CSS properties


The CSS counter-increment property assists in generating automatic numbering (for example, Heading 1, Section 1.1, Heading 2, Heading 2.2 etc) by incrementing the count by a given number. The counter-increment property is used in conjunction with the CSS count() function of the 'content' property (which is used with the ':before' or ':after' pseudo-elements).

Also see the counter-reset and content properties.

Syntax: content: "<string> " counter(<identifier>) " ";
counter-increment: <identifier> <integer>;
Possible Values:
  • none
  • <identifier> <integer>
    The integer indicates how much the count is incremented by. The default is 1. Zero and negative integers are allowed.
  • inherit
Initial Value: None
Applies to: All elements
Inherited: No
Media: All
Example:
h1:before {
    content: "Section " counter(section) " ";
    counter-increment: section;
}

Also see all CSS properties listed alphabetically


Enjoy this website?

  • Share
  • Add this page to your Favorites
  • Link to this page (copy/paste into your own website or blog):
  • Link to Quackit using one of these banner ads.
  • Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!

© Copyright 2000 - 2010 Quackit.com