HTML ordered list custom numbering

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

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;
}

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