{"id":18320,"date":"2013-10-09T21:01:42","date_gmt":"2013-10-09T13:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18320"},"modified":"2025-04-24T17:09:35","modified_gmt":"2025-04-24T09:09:35","slug":"css-automatic-numbering","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/","title":{"rendered":"Automatic Numbering with CSS Counter"},"content":{"rendered":"<p>We have covered a lot of cool CSS3 capabilities \u2013 from <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/\">Color Gradients<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-3d-transforms\/\">Transitions, and Animation<\/a>. Actually, there are also several properties in CSS2 that is really useful but less known, including one we are going to discuss in this post: <strong>CSS Counter<\/strong>.<\/p>\n<p>As you may already know, when we add lists with the <code>&lt;ol&gt;<\/code> element, the list is numbered automatically. By using CSS Counter, we can even number any element. So, let\u2019s see how it is done.<\/p>\n<h2>Basic Usage<\/h2>\n<p>CSS Counter consists of two main properties: <code>counter-reset<\/code> and <code>counter-increment<\/code>. The <code>counter-reset<\/code> is used to reset the count, while the <code>counter-increment<\/code> \u2013 coupled with pseudo-element \u2013 is used to add the numbers.<\/p>\n<p>The following code is a basic example of how we number a <code>&lt;h1&gt;<\/code> element with these properties.<\/p>\n<pre>\nbody {\ncounter-reset: number;\n}\nh1:before {\ncounter-increment: number;\ncontent: \"counter(number) \";\n}\n<\/pre>\n<p>This code gives us the following result.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS counter simple numbering example\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/simple-numbering.jpg\" width=\"500\"><\/figure>\n<p>In case you want the number to start from specific point, you can specify the \u201creset number\u201d this way.<\/p>\n<pre>\nbody {\ncounter-reset: number 1;\n}\n<\/pre>\n<p>This number that we added in the above code is the \u201creset number\u201d. If it is not declared explicitly it will be set at <strong>0<\/strong> as the default, and the count will initialize from <strong>1<\/strong>. In other words, the generated number will initialize from the next number of the one in the <code>counter-reset<\/code> property. So, given our example above, the count will start from <strong>2<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS counter reset start example\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/reset-start.jpg\" width=\"500\"><\/figure>\n<p>Furthermore, you can also change the type of the number, which is specified within the <code>content<\/code> property.<\/p>\n<pre>\nh2:before {\ncounter-increment: first;\ncontent: counter(number, upper-roman) \". \";\n}\n<\/pre>\n<p>The result will turn out as follows.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS counter Roman numeral example\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/roman-number.jpg\" width=\"500\"><\/figure>\n<h2>Final Thought<\/h2>\n<p>This property might only be useful for a particular type of website, and it is likely that you will not use it every day. But we hope this post can be a good reference for when you need it. And if you have any questions regarding the subject, feel free to post the question in the comment box below.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css-automatic-numbering\/\">View Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css-automatic-numbering\/\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>We have covered a lot of cool CSS3 capabilities \u2013 from Color Gradients, Transitions, and Animation. Actually, there are also several properties in CSS2 that is really useful but less known, including one we are going to discuss in this post: CSS Counter. As you may already know, when we add lists with the &lt;ol&gt;&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Automatic Numbering with CSS Counter - Hongkiat<\/title>\n<meta name=\"description\" content=\"We have covered a lot of cool CSS3 capabilities - from Color Gradients, Transitions, and Animation. Actually, there are also several properties in CSS2\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatic Numbering with CSS Counter\" \/>\n<meta property=\"og:description\" content=\"We have covered a lot of cool CSS3 capabilities - from Color Gradients, Transitions, and Animation. Actually, there are also several properties in CSS2\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-09T13:01:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:09:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/simple-numbering.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Automatic Numbering with CSS Counter\",\"datePublished\":\"2013-10-09T13:01:42+00:00\",\"dateModified\":\"2025-04-24T09:09:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/\"},\"wordCount\":304,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-automatic-numbering\\\/simple-numbering.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/\",\"name\":\"Automatic Numbering with CSS Counter - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-automatic-numbering\\\/simple-numbering.jpg\",\"datePublished\":\"2013-10-09T13:01:42+00:00\",\"dateModified\":\"2025-04-24T09:09:35+00:00\",\"description\":\"We have covered a lot of cool CSS3 capabilities - from Color Gradients, Transitions, and Animation. Actually, there are also several properties in CSS2\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-automatic-numbering\\\/simple-numbering.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-automatic-numbering\\\/simple-numbering.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-numbering\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automatic Numbering with CSS Counter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Automatic Numbering with CSS Counter - Hongkiat","description":"We have covered a lot of cool CSS3 capabilities - from Color Gradients, Transitions, and Animation. Actually, there are also several properties in CSS2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/","og_locale":"en_US","og_type":"article","og_title":"Automatic Numbering with CSS Counter","og_description":"We have covered a lot of cool CSS3 capabilities - from Color Gradients, Transitions, and Animation. Actually, there are also several properties in CSS2","og_url":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-10-09T13:01:42+00:00","article_modified_time":"2025-04-24T09:09:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/simple-numbering.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Automatic Numbering with CSS Counter","datePublished":"2013-10-09T13:01:42+00:00","dateModified":"2025-04-24T09:09:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/"},"wordCount":304,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/simple-numbering.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/","url":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/","name":"Automatic Numbering with CSS Counter - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/simple-numbering.jpg","datePublished":"2013-10-09T13:01:42+00:00","dateModified":"2025-04-24T09:09:35+00:00","description":"We have covered a lot of cool CSS3 capabilities - from Color Gradients, Transitions, and Animation. Actually, there are also several properties in CSS2","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/simple-numbering.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-numbering\/simple-numbering.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-numbering\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Automatic Numbering with CSS Counter"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Lu","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18320"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18320\/revisions"}],"predecessor-version":[{"id":74102,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18320\/revisions\/74102"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18320"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}