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 http://www.billerickson.net/code/styled-ordered-list/
*/
.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

styled-list-items

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk