{"id":33386,"date":"2016-04-04T16:18:24","date_gmt":"2016-04-04T10:48:24","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=33386"},"modified":"2017-09-12T12:44:58","modified_gmt":"2017-09-12T07:14:58","slug":"creating-automatic-numbering-with-css-counter","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/creating-automatic-numbering-with-css-counter\/","title":{"rendered":"Creating Automatic Numbering with CSS Counter"},"content":{"rendered":"

As you know, in\u00a0front end development<\/a>\u00a0<\/span>when we add lists to the <ol> element, a numbered list gets generated automatically.<\/p>\n

Similarly, we can generate numbers for any element using CSS Counter. Let’s see how it is done?<\/p>\n

Usage:<\/h3>\n

CSS Counter has two main properties: “counter-reset” and “counter-increment”.<\/p>\n

The following code is an example of how we number a <h1> element with these properties.<\/p>\n

[java]body {
\n\tcounter-reset: number;
\n}
\nh1:before {
\n\tcounter-increment: number;
\n\tcontent: counter(number) " ";
\n}[\/java]<\/p>\n

Here is the image that shows the number of <h1>.<\/p>\n

\"img1\"<\/p>\n

In case you want the number to start from specific number, you can specify the “reset number” as follows:<\/p>\n

[java]body {
\n counter-reset: number 1;
\n}[\/java]<\/p>\n

If the reset number is not declared clearly it will be set it as 0 as default, and the count will start from 1.<\/p>\n

Similarly, the numbering\u00a0will start from the next number to\u00a0the one in the counter-reset property. So, as per given example code above, the count will start from 2.<\/p>\n

Here is the image that show the number of <h1> starting from 2.<\/p>\n

\"img2\"<\/p>\n

Even, you can also change the type of the number, which is specified within the content property.<\/p>\n

[java]h2:before {
\n counter-increment: first;
\n content: counter(number, upper-roman) ". ";
\n}[\/java]<\/p>\n

Here is the image that shows the roman number of <h1>.<\/p>\n

\"img3\"<\/p>\n","protected":false},"excerpt":{"rendered":"

As you know, in\u00a0front end development\u00a0when we add lists to the <ol> element, a numbered list gets generated automatically. Similarly, we can generate numbers for any element using CSS Counter. Let’s see how it is done? Usage: CSS Counter has two main properties: “counter-reset” and “counter-increment”. The following code is an example of how we […]<\/p>\n","protected":false},"author":206,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":7,"footnotes":""},"categories":[3429],"tags":[3177,3174,3176,3175],"class_list":["post-33386","post","type-post","status-publish","format-standard","hentry","category-front-end-development","tag-css-numbering","tag-number-list-with-css","tag-numbering-css-html","tag-numbering-in-css"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t