Ordered List CSS Styles

Styling ordered list numbers with CSS is not as simple as one might think because there is no CSS selector to target list numbers. Styling them is only possible with a simple CSS3 technique that uses a counter to replace the default numbers.

Styled numbers will only be visible in CSS3 browsers , but fallback is provided so that default unstyled numbers are displayed in old browsers.

<ol> CSS styling

CSS counters are variables which are incremented using CSS rules. By reseting a counter on every ol tag and then incrementing it on every li tag, we replicate the list numbering. Then simply set the li's content as the counter value. To create your own ol CSS styles start with:

ol.mylist {
	list-style-type: none;
	counter-reset: ol-counter;
}
ol.mylist > li:before {
	content: counter(ol-counter);
	counter-increment: ol-counter;
}

To use roman numerals change the content rule to content: counter(ol-counter, upper-roman); (for I,II,III,IV...). For letters, use lower-alpha (a,b,c,d...) or upper-alpha (A,B,C,D...). With the above code, no numbers are displayed in browsers that don't support counters, like Internet Explorer 7 and below. Add the line list-style-type: decimal !ie; for a normal unstyled list to be displayed in IE7-.

Some <ol> styles

I leave you some <ol> CSS styles I created using the technique explained above. Feel free to copy and modify them, or use the code as is.

All the examples make use of the IE7- hack to show an unstyled list. Removing the IE7- hack future-proofs the code (in case the line is read by a new browser, breaking the hack), but then no numbers will be displayed by those browsers.

Visit our demo to see the ordered list CSS working:

DEMO

Simple

Simple. Just a number and a border:

Simple ordered list style

ol.simple-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 3em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.simple-list > li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 0.5em;
	min-height: 3em;
	border-left: 2px solid #CCCCCC;
}
ol.simple-list > li:before {
	position: absolute;
	top: 0;
	left: -1em;
	width: 0.8em;
	
	font-size: 3em;
	line-height: 1;
	font-weight: bold;
	text-align: right;
	color: #464646;

	content: counter(li-counter);
	counter-increment: li-counter;
}

Tilted

Tilted and partially covered numbers. Depending on your font, you may need to change the left propery of the pseudo-element to adjust the look.

Tilted ordered list style

ol.tilted-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 3em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.tilted-list > li{
	position: relative;
	margin-bottom: 20px;
	padding: 1em;
	border-left: 2px solid #CCCCCC;
	background-color: #f5f5f5;
}
ol.tilted-list > li:before {
	position: absolute;
	top: 0;
	left: -0.95em;
	width: 1em;

	font-size: 4em;
	line-height: 1;
	font-weight: bold;
	text-align: right;
	color: #464646;
	
	transform: rotate(-25deg);
	-ms-transform: rotate(-25deg);
	-webkit-transform: rotate(-25deg);
	z-index: -99;
	overflow: hidden;
	
	content: counter(li-counter);
	counter-increment: li-counter;
}

Circles

Circles look great in color. Change border and background colors to fit your theme. Adding box shadow might engance the look.

Circles ordered list style

ol.circles-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 4em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.circles-list > li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 0.5em;
	min-height: 3em;
}
ol.circles-list > li:before {
	position: absolute;
	top: 0;
	left: -1.33em;
	width: 1.2em;
	height: 1.2em;
	
	font-size: 2.5em;
	line-height: 1.2;
	text-align: center;
	color: #f5f5f5;

	border: 3px solid #c5c5c5;
    border-radius: 50%;
	background-color: #464646;
	content: counter(li-counter);
	counter-increment: li-counter;
}

Boxes

Boxes ordered list style

ol.boxes-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 3em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.boxes-list > li{
	position: relative;
	margin-bottom: 15px;
	padding: 1em;
	
	background-color: #d5d5d5;
}
ol.boxes-list > li:before {
	position: absolute;
	top: 0;
	left: -1em;
	width: 0.94em;
	height: 0.94em;
	
	font-size: 3em;
	line-height: 0.94;
	text-align: center;
	color: #f5f5f5;

	background-color: #464646;
	content: counter(li-counter);
	counter-increment: li-counter;
}

Labels

Labels ordered list style

ol.labels-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	
	margin: 0;
	margin-left: 1em;
	padding: 0;
	
	counter-reset: li-counter;
}
ol.labels-list > li{
	position: relative;
	margin-bottom: 1.5em;
	padding: 1.5em;
	background-color: #eaeaea;
}
ol.labels-list > li:before {
	position: absolute;
	top: -0.3em;
	left: -0.5em;
	width: 1.8em;
	height: 1.2em;
	
	font-size: 2em;
	line-height: 1.2;
	font-weight: bold;
	text-align: center;
	color: #464646;
	background-color: #d0d0d0;
	
	transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	z-index: 99;
	overflow: hidden;
	
	content: counter(li-counter);
	counter-increment: li-counter;
}

View our demo showing the above styles:

DEMO

Useful resources:

Please share any creative ordered list CSS you come up with.

19 comments

  1. Very helpful! But when I use this code, the old numbers still appear beside the new ones. What will I need to put in the code to hide the original numbers?

  2. Hello,

    I’m building a website for an exhibition using the Twenty Sixteen theme for WordPress and I want to use your CSS code for styling my ordered lists using the ol.boxes-list. The website is built in four languages and of them is Arabic. Given that Arabic is written from right to left, how can I display the numbers on the right side of the Arabic version of my ordered lists? Can you please specify what modification should I make to the code? I’m also using the start attribute in my lists to start at a specific value, but it doesn't work, the numbering always starts at one. Do you have a fix for this issue?

    Best regards,

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>