Wednesday, July 23, 2014

CSS3 counter-increment Property

Counter-increment property is new CSS3 property.The counter-increment is used to increments one or more counter values.

Syntax

counter-increment: none|id|initial|inherit; 


Simple CSS3 Code for Counter-increment

h2::before {
        content: counter(section) ". ";
        counter-increment: section;
    }

Full CSS3 Code for Counter-increment

<style type="text/css">
h1 {
    counter-reset: section;
}
h2 {
    counter-reset: subsection;
}
h2::before {
    content: counter(section) ". ";
    counter-increment: section;
}
p::before {
    content: counter(section) "." counter(subsection) " ";
    counter-increment: subsection;
}
</style>

Browser Support

The counter-increment property is supported in all major browsers.
Please share your comments and feedback.Thanks.Please subscribe my updates via email.

No comments:

Post a Comment