Styled Ordered List

Written by Bill EricksonPublished on October 9, 2014Updated on December 5, 2018

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