Styling an Ordered List [Tutorial]

ordered list

Even with today’s well established CSS3 techniques, there isn’t an obvious solution to style ordered lists. In this short article, I’ll to show you how to achieve some simple styling on an ordered list using a minimum amount of semantic code.

The method outlined below involves swapping the default ordered numbering using CSS generated counters and the pseudo element :before.

Tested in browsers: IE8-10, Chrome 29+, FireFox 22+, Opera 12+ and Safari.

HTML Code

  1. This is list item number 1
  2. This is list item number 2
  3. This is list item number 3

CSS Code

ol.list {
	list-style: none; /* removes default list style */
	counter-reset: list; /* counter reset identifier defined */
}
ol.list li {
	position: relative; /* relative position set for absolute position of 'li:before' below */
	margin: 0 0 1em; /* margins */
	padding: 0 0 0 2.5em; /* padding */
}
ol.list li:before { 
	content: counter(list); /* sets content counter */
	counter-increment: list; /* increments the 'list' counter */
	text-align: center; /* center aligns text */
	position: absolute; /* sets absolute position for number */
	left:0; /* required to pull back to absolute positioning */
	width: 25px; /* width of counter */
	background-color: grey; /* background for number */
	color: white; /* sets text color to white */
	
}

Result

  1. This is list item number 1
  2. This is list item number 2
  3. This is list item number 3

If you have a more streamlined approach or can offer any tips, be sure to leave them in the comments below.

Useful Link

Leave a Reply

Your email address will not be published. Required fields are marked *