{"id":6333,"date":"2022-09-02T19:43:38","date_gmt":"2022-09-02T14:13:38","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/"},"modified":"2022-09-02T19:43:38","modified_gmt":"2022-09-02T14:13:38","slug":"solved-using-css-to-style-a-numbered-list","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/","title":{"rendered":"[Solved] Using CSS to style a numbered list"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-27009218\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"27009218\" data-parentid=\"26997532\" data-score=\"2\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Below is a sample on how the desired result can be achieved using <code>&lt;ol&gt;<\/code> (ordered lists) and CSS <code>counters<\/code>. It has a bit of a hack-ish feel about it because of the expectation that when a line is wrapped around, it should not start from under the numberings. Otherwise, I feel this method is much better than manually keying in the numbers (or) using tables.<\/p>\n<p>Consistent spacing between the numbering and text is obtained by setting a <code>width<\/code> to the <code>li:before<\/code> pseudo-element and making its display as <code>display: inline-block<\/code>. Modify the <code>width<\/code> based on how much spacing is required. Note that when modifying the <code>width<\/code>, the <code>margin-left<\/code> and <code>padding-left<\/code> also have to be modified accordingly to maintain the styling.<\/p>\n<p>CSS Counters have reasonably <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/caniuse.com\/#search=counter\"><strong>good browser support<\/strong><\/a> also.<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.level1, .level2, .level3 {\r\n    list-style-type: none;\r\n}\r\n.level1 {\r\n    counter-reset: level1; \/* first level counter - for 1, 2, 3 *\/\r\n}\r\n.level2 {\r\n    counter-reset: level2; \/* second level counter - for 1.1, 1.2 *\/\r\n}\r\n.level3 {\r\n    counter-reset: level3; \/* third level counter - for (a), (b) *\/\r\n}\r\nli {\r\n    display: block;\r\n}\r\nli:not(:last-child):after, li &gt; ol:before{\r\n    content: \" \";\r\n    display: block;\r\n    position: relative;\r\n    height: 20px; \/* this is filler where height should be equal to required line height *\/\r\n    left: 0px; top: 100%;\r\n}\r\n.level1, .level2, .level3 {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n.level1 &gt; li, .level3 &gt; li {\r\n    padding-left: 40px;\r\n}\r\nli:before {\r\n    margin-left: -40px;\r\n    \/* following 2 props are for consistent spacing between numbering and text *\/\r\n    width: 40px;\r\n    display: inline-block;\r\n}\r\n.level1 &gt; li{\r\n    font-weight: bold;\r\n}\r\n.level1 &gt; li:before, .level1 &gt; li * {\r\n    font-weight: normal;\r\n}\r\n.level1 &gt; li:before {\r\n    content: counter(level1)\".\"; \/* display current item number + dot *\/\r\n    counter-increment: level1; \/* increment counter everytime a new element of that level is encountered *\/\r\n}\r\n.level2 &gt; li:before {\r\n    content: counter(level1)\".\" counter(level2); \/* format level 1 counter + dot + level 2 counter *\/\r\n    counter-increment: level2;\r\n}\r\n.level3 &gt; li:before {\r\n    content: \"(\" counter(level3, lower-latin)\") \"; \/* format ( + level3 counter + ) *\/\r\n    counter-increment: level3;\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;ol class=\"level1\"&gt;\r\n    &lt;li&gt;one\r\n        &lt;ol class=\"level2\"&gt;\r\n            &lt;li&gt;one dot one - has some really really lengthy text which wraps around to the next line when it overflows the width.&lt;\/li&gt;\r\n            &lt;li&gt;one dot two\r\n                &lt;ol class=\"level3\"&gt;\r\n                    &lt;li&gt;A&lt;\/li&gt;\r\n                    &lt;li&gt;B - has some really really lengthy text which wraps around to the next line when it overflows the width.&lt;\/li&gt;\r\n                &lt;\/ol&gt;\r\n            &lt;\/li&gt;\r\n        &lt;\/ol&gt;\r\n    &lt;\/li&gt;\r\n    &lt;li&gt;two - has some really really lengthy text which wraps around to the next line when it overflows the width.&lt;\/li&gt;\r\n&lt;\/ol&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<hr>\n<p><strong>Feedback to comments:<\/strong><\/p>\n<ol>\n<li>\n<p>The <code>{content: \"\\a\"; white-space: pre;}<\/code> trick does not quite work with <code>inline-block<\/code> elements. The inner level <code>li<\/code> tags are <code>inline-block<\/code> in our case (for reasons explained above in 2nd paragraph) and hence that particular trick doesn&#8217;t work. The alternate is to insert a blank filler line with <code>height<\/code> of the line equal to the required <code>line-height<\/code> and position it below the <code>li<\/code> tag. <strong>Note<\/strong> that the selector used is <code>li:not(:last-child):after<\/code> because we don&#8217;t need an extra line break after the last <code>li<\/code> (if we do not do it, we will have double line space after the inner <code>li<\/code> ends). This is a CSS3 selector and so might not work with lower versions of IE. If you need to support those versions also then we would need to tweak it further (or simpler would be to use <code>br<\/code>).<\/p>\n<\/li>\n<li>\n<p>You were on the correct path here, but the <code>:before<\/code> pseudo-element (which has the numbering) is not on the element with <code>class=\"level1\"<\/code>. It was on the <code>.level1 &gt; li<\/code> and hence doing a reset of <code>font-weight<\/code> for selector <code>.level1 &gt; li:before, .level1 &gt; li *<\/code> would fix it. As you would have already known\/guessed, <code>.level1 &gt; li *<\/code> means every element under the level one <code>li<\/code>.<\/p>\n<\/li>\n<\/ol>\n<\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">4<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Using CSS to style a numbered list <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Below is a sample on how the desired result can be achieved using &lt;ol&gt; (ordered lists) and CSS counters. It has a bit of a hack-ish feel about it because of the expectation that when a line is wrapped around, it should not start from under the numberings. Otherwise, I feel this method is &#8230; <a title=\"[Solved] Using CSS to style a numbered list\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/\" aria-label=\"More on [Solved] Using CSS to style a numbered list\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,1737],"class_list":["post-6333","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-css-counter"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Using CSS to style a numbered list - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Using CSS to style a numbered list - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Below is a sample on how the desired result can be achieved using &lt;ol&gt; (ordered lists) and CSS counters. It has a bit of a hack-ish feel about it because of the expectation that when a line is wrapped around, it should not start from under the numberings. Otherwise, I feel this method is ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-02T14:13:38+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\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:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Using CSS to style a numbered list\",\"datePublished\":\"2022-09-02T14:13:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/\"},\"wordCount\":312,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"css-counter\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/\",\"name\":\"[Solved] Using CSS to style a numbered list - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-02T14:13:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Using CSS to style a numbered list\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Using CSS to style a numbered list - JassWeb","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:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Using CSS to style a numbered list - JassWeb","og_description":"[ad_1] Below is a sample on how the desired result can be achieved using &lt;ol&gt; (ordered lists) and CSS counters. It has a bit of a hack-ish feel about it because of the expectation that when a line is wrapped around, it should not start from under the numberings. Otherwise, I feel this method is ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/","og_site_name":"JassWeb","article_published_time":"2022-09-02T14:13:38+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Using CSS to style a numbered list","datePublished":"2022-09-02T14:13:38+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/"},"wordCount":312,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","css-counter"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/","url":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/","name":"[Solved] Using CSS to style a numbered list - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-02T14:13:38+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-using-css-to-style-a-numbered-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Using CSS to style a numbered list"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/6333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=6333"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/6333\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=6333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=6333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=6333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}