{"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":4},"categories":[3429],"tags":[3177,3174,3176,3175],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/33386"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=33386"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/33386\/revisions"}],"predecessor-version":[{"id":51799,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/33386\/revisions\/51799"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=33386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=33386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=33386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}