Styled Ordered List

When using an ordered list ( <ol> ), the browser will automatically include numbers in front of each list item. Unfortunately these numbers can’t be styled using CSS, but we can disable them and add new numbers that can be styled.

The snippet below turns off the numbering (list-style), then sets up a counter and adds the number back using the :before pseudo-element. This pseudo-element can then be styled however you want.

* Styled Ordered List
* @author Bill Erickson
* @link
.entry-content ol {
counter-reset: li;
list-style: none;
*list-style: decimal;
.entry-content ol li {
position: relative;
padding-left: 60px;
min-height: 60px;
.entry-content ol li:before {
content: counter(li);
counter-increment: li;
color: #fff;
background: #f07100;
border-radius: 50%;
font-size: 18px;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
display: block;
position: absolute;
top: 0;
left: 0;
view raw style.css hosted with ❤ by GitHub


Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk