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.

20 comments

  1. I put that code in my css but the counter starts from 1 every new ol... I don't understand

    ol.round4 {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/

    margin: 0;
    margin-left: 4em;
    padding: 0;

    counter-reset: li-counter !important;
    }
    ol.round4 > li{
    position: relative;
    margin-bottom: 10px;
    padding-left: 1em;
    min-height: 2.5em;
    }
    ol.round4 > li:before {
    position: absolute;
    top: -0.2em;
    left: -1.33em;
    width: 1.6em;
    height: 1.6em;

    font-size: 1.2em;
    line-height: 1.7;
    text-align: center;
    color: #FFFFFF;

    border-radius: 50%;
    background-color: #424242;
    content: counter(li-counter);
    counter-increment: li-counter;
    }

  2. Great, I have not used it but you think we can use it without any obligation? I will certainly put a not on my CSS file on the source.

  3. This is awesome man, Gracias por la informaciĆ³n y los ejemplos.

    One note though: At the moment of this writing Sass v3.3.4 (Maptastic Maple) doesn't like this part: list-style-type: decimal !ie; /*IE 7- hack*/.

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>