\n
![\"counter](\"https:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2015\/11\/counter.jpg\")
\nThe image above is what we’ll be creating today, so lets first look at the html code that will be used.<\/p>\n
Today we are going to look at creating a numbered list with css. In this example we will be using the counter-reset and counter-increment properties to number our list. You might be thinking, why don’t we just use the ordered list tag (<ol>), yes we could use this tag but you can’t really style the numbers very well. By using the css properties, we can add a lot more style to our numbers plus it gives us greater control to change aspects of the numbered lists.
\n
\nThe image above is what we’ll be creating today, so lets first look at the html code that will be used.<\/p>\n
<div class=\"au\">\r\n<h2>States in Australia<\/h2>\r\n <ol>\r\n <li>New South Wales<\/li>\r\n <li>Victoria<\/li>\r\n <li>South Australia<\/li>\r\n <li>Western Australia<\/li>\r\n <li>Queensland<\/li> \r\n <li>Tasmania<\/li> \r\n <\/ol>\r\n<h2>Territories in Australia<\/h2>\r\n <ol>\r\n <li>Northern Territory<\/li>\r\n <li>Australian Capital Territory<\/li>\r\n <\/ol>\r\n<\/div><\/xmp><\/code><\/pre>\n<p>Now if we finished here, you would still get a numbered list by using the html ordered list tag (<ol>), but the numbers would be plain and boring, by using the css <a href=\"http:\/\/www.cssportal.com\/css-properties\/counter-reset.php\">counter-reset<\/a> and <a href=\"http:\/\/www.cssportal.com\/css-properties\/counter-increment.php\">counter-increment<\/a> properties, we will be able to style the numbers with ease.<\/p>\n<p>Lets now add a bit of style to our number list, we will break down the css code and go through it to see what is happening.<\/p>\n<h3>The CSS<\/h3>\n<pre class=\"language-css\"><code>ol {\r\n list-style:none;\r\n counter-reset:mycounter;\r\n padding:0;\r\n}<\/code><\/pre>\n<p>The first part of our css code is rather straight forward, this is what is happening with each line:<br \/>\n<span class=\"code\">list-style:none;<\/span> – This will remove the basic styles associated with the ordered list tag.<br \/>\n<span class=\"code\">counter-reset:mycounter;<\/span> – The counter-reset property will reset our counter to 0 (by default), if you wanted to start the counter from a specified number, say 6, we would just add 6 to the end of our declaration, which would be, counter-reset:mycounter 6; The ‘mycounter’ is the name I have used that will define which counter needs to be reset.<br \/>\n<span class=\"code\">padding:0;<\/span> – Removes all padding from our ordered list tag.<\/p>\n<pre class=\"language-css\"><code>ol li {\r\n position:relative; \r\n margin-left: 30px;\r\n padding:5px 0;\r\n}<\/code><\/pre>\n<p>The second part of our css code will style the actual list, we could add colors here, change font-size, backgrounds and so on.<br \/>\n<span class=\"code\">position:relative;<\/span> – We need to give our list a position of relative.<br \/>\n<span class=\"code\">margin-left: 30px;<\/span> – This will move our list 30px from the left.<br \/>\n<span class=\"code\">padding:5px 0;<\/span> – Gives our list a padding at the top and bottom of 5px, left and right has no padding.<\/p>\n<pre class=\"language-css\"><code>ol li:before {\r\n content:counter(mycounter); \r\n counter-increment:mycounter;\r\n position:absolute;\r\n top:0;\r\n left:-30px;\r\n width:25px;\r\n height:25px;\r\n line-height:25px;\r\n border-radius:50%;\r\n color:#fff;\r\n background:teal;\r\n text-align:center;\r\n}<\/code><\/pre>\n<p>The third part is where the fun begins, this is where the numbers are added and we can style them here as well.<br \/>\n<span class=\"code\">content:counter(mycounter);<\/span> – This is the property that will actually display our number. We have used ‘mycounter’ as that is what was specified as the name above.<br \/>\n<span class=\"code\">counter-increment:mycounter;<\/span> – This property will increase our number by 1 (default), if you added another number after ‘mycounter’ such as 5, the numbers would then increment by 5 each time eg, 5 10 15 20 etc.<br \/>\n<span class=\"code\">position:absolute;<\/span> – We set the position to absolute, so that we can control where our numbers are displayed.<br \/>\n<span class=\"code\">width and height<\/span> – Sets the width and height for our number.<br \/>\n<span class=\"code\">border-radius:50%;<\/span> – Adds a radius to our number, this will give us a circle as the width and height are the same size.<br \/>\n<span class=\"code\">color:#fff;<\/span> – Our font color will be set to #fff, which is white.<br \/>\n<span class=\"code\">background:teal;<\/span> – This will set the background of our color to teal.<br \/>\n<span class=\"code\">text-align:center;<\/span> – We need this property to set our number in the center of the circle. This will set the horizontal alignment, we have used line-height to set the vertical alignment.<\/p>\n<pre class=\"language-css\"><code>.au {\r\n display:inline-block;\r\n border:1px solid #ccc;\r\n background:#f2f2f2;\r\n border-radius:10px;\r\n box-shadow:2px 2px 2px #888;\r\n padding:10px; \r\n}<\/code><\/pre>\n<p>I will not go through the above css code as this is only used to add a border and background color to our container.<\/p>\n<p>This was just a simple example of the counter properties, there are a lot of other ways that you can use these properties and I will post another blog in the future showing some different examples.<\/p>\n<p>Well that’s about it for this blog, click the button below to experiment with this code.<\/p>\n<p><a class=\"btn btn-primary\" href=\"https:\/\/www.cssportal.com\/tryit\/index.php?file=blog\/numbered-lists\" target=\"_blank\" rel=\"noopener\">Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we are going to look at creating a numbered list with css. In this example we will be using the counter-reset and counter-increment properties to number our list. You might be thinking, why don’t we just use the ordered list tag (<ol>), yes we could use this tag but you can’t really style the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-406","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=406"}],"version-history":[{"count":8,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/406\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/406\/revisions\/573"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}