Automatic Counters and Numbering with CSS counter-reset

In this article i will talk about how to create automated numbering of element.It works on any HTML element not only with <ol>.I am talking about CSS counter-reset property which will be used for automated numbering of a element.

It is very useful in creating a FAQ page or table of content.

View Demo

Automatic Numbering with CSS Demo
Below is a Simple Example:

article{
   counter-reset:section
}
section{
   counter-increment:section
}
section h1::before{
   content: counter(section) ".";
}
<article>
   <section>
    <h1>Welcome to Section 1</h1>
   </section>
   <section>
    <h1>Welcome to Section 2</h1>
   </section>
   ...
</article>

Syntax

counter-reset: [ <counter-name> <integer>? ]+ | none;

Where…

  • <counter-name> is the name of counter you want.
  • <integer> is the value to reset the counter to
  • none to disabled the counter
article{
  counter-reset: my-counter-name 0;
}
Note: The Default value for <integer> is 0.If the <integer> value is not set after the <counter-name>, it will be set to 0.
Above code is same as:

article{
  counter-reset: my-counter-name;
}

You can also reset multiple counters at one place.

article{
 counter-reset: section 3 subsection 4 subsubsection;
}

Increment the Counter

As we have already Created the Counter,now we need to increment its value.We will use counter-increment CSS property to increment the value.
For Example:

article{
  counter-reset: my-counter;
}
section{
   counter-increment: my-counter;
}

Before you leave check this great tutorial CSS3 Flip Animation.If you have any Tutorial request or wants to share some tutorial,then please let us know by contacting us today.

I hope that you like this article,so please share this with your friends.

Resource

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *