Home / Frontend Codes and Demos / CSS Code Demos / HTML ordered list custom numbering
CSS html orderlist styling

This tutorial will explain how to get customized numbering in HTML order list using CSS.

HTML ordered list custom numbering

CSS html orderlist styling

This tutorial will explain how to get customized numbering in HTML order list using CSS.

{loadposition position-9}

Numbering in HTML Order List Style

Find the HTML code below

<ol>     <li>This is 1st item</li>     <li>This is 2nd item</li>     <li>This is 3rd item</li>     <li>This is 4th item</li> </ol>

Using CSS counter increment can increase the number. To customize the text like word document we can use css “content”. Get more idea about css counter please look at the link.

Find the CSS code below

ol {     counter-reset: nCounter 0;     padding: 0 0 0 50px;     margin: 0;     border: 1px solid #ccc;     background: #f8f8f8; } ol li {     list-style: none outside;     padding: 5px 10px 5px 10px; } ol li:before {     content: "Step " counter(nCounter) ".";     counter-increment: nCounter;     font-weight: bold;     float: left;     margin: 0 0 0 -55px;     padding: 0;     width: 50px; }

{loadposition position-10}

In above css code I used the :before to the counter before li with custom content “Step”. Have to reset the counter for that have to use counter-reset in css

CSS custom ol (Order List) numbering Demo

  1. This is 1st item
  2. This is 2nd item
  3. This is 3rd item
  4. This is 4th item

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …