Custom html list with styled numbers
In this tutorial I will show you how to create html ordered lists with custom styled numbering.
Html
The html source is a basic ordered list with either shorter and longer texts:
<ol>
<li>List item 1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet neque dui. Vivamus nisi ex, fermentum in vehicula eget, sollicitudin sit amet enim. Sed est lectus, consectetur sed blandit placerat, accumsan et ligula. Donec venenatis felis ut dolor auctor, eu placerat tortor dapibus.</li>
<li>List item 2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet neque dui. Vivamus nisi ex, fermentum in vehicula eget, sollicitudin sit amet enim. Sed est lectus, consectetur sed blandit placerat, accumsan et ligula. Donec venenatis felis ut dolor auctor, eu placerat tortor dapibus.</li>
<li>List item 3 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet neque dui. Vivamus nisi ex, fermentum in vehicula eget, sollicitudin sit amet enim. Sed est lectus, consectetur sed blandit placerat, accumsan et ligula. Donec venenatis felis ut dolor auctor, eu placerat tortor dapibus.</li>
<li>List item 4</li>
<li>List item 5</li>
</ol>
Css
First we need to disable the default style of the list, add a left padding and define a counter-reset attribute, what can be any word you would like to use for the list styling:
ol {
list-style: none;
counter-reset: my-counter;
padding-left: 35px;
}
Next, add a counter-increment attribute (with the same name you defined in the previous step), a negative text indentation, and a bottom margin for a better separated look:
ol li {
counter-increment: my-counter;
margin-bottom: 15px;
text-indent: -35px;
}
Then we add a :before pseudo class to the list items containing numbers and the stylings:
ol li::before {
content: counter(my-counter);
color: white;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
display: inline-block;
background: #39c346;
border-radius: 100%;
margin-right: 10px;
text-indent: 0;
}
Finally our basic ordered list with custom numbers looks like this:
Check out the live example on CodePen.
