Dynamic Drive CSS Library- Customizing Order List style using CSS

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Other: Here

Customizing Order List style using CSS

Author: Dynamic Drive

Styling the automatically generated number counters in ordered lists (<ol>) can be challenging. This CSS code demonstrates one way to do it by getting rid of the default ones first, then using CSS generated content to create custom counters instead. Specifically, we turn to CSS generated counters, using the "before:" pseudo element and setting its content to "counter". The result is custom counters that can be styled using all the powers of CSS! The custom style works in all modern browsers- IE9+, FF, Chrome, Safari etc.

In the below demo, each level of OL carries a slightly varied style from that of its' parent's (up to the 3rd level).

this is a list 1
this is a list 1
1. this is a list 2
2. this is a list 2
  1. this is a list 3
  2. this is a list 3
  3. this is a list 3
  4. this is a list 3
3. this is a list 2
4. this is a list 2
this is a list 1
this is a list 1
this is a list 1

The CSS:

<style>

ol{
	list-style: none;
	counter-reset: li; /* reset counter for ol (li is just arbitrary identifier) */
}

ol li{
	position:relative;
	margin-bottom: 10px; /* bottom spacing between lis */
	padding: 4px 10px;
}

ol ol{
	margin-top: 1em; /* for nested ols, add top and bottom spacing */
	margin-bottom: -10px;
}

ol > li:before{ /* pseudo element for custom counter */
	content:counter(li); /* set its content to CSS generated counter, using the "li" counter defined above */
	counter-increment:li; /* increment the li counter each time, assumed starting index is 0 */
	text-align: center;
	display:block;
	position:absolute;
	width: 27px; /* width of counter */
	height: 27px; /* height of counter */
	line-height: 27px; /* set this to same as height value */
	font-weight: bold;
	top: 0;
	left: -30px; /* shift counter to the left */
	background: #452b06; /* background of counter */
	color: white;
	z-index: -1;
	-moz-box-shadow: 2px 2px 4px gray; /* CSS3 shadows */
	-webkit-shadow: 2px 2px 4px gray;
	box-shadow: 2px 2px 4px gray;
}

ol ol > li:before{ /* 2nd level custom counter specific style */
	background: darkred;
	border-radius: 8px;
}

ol ol ol > li:before{ /* 3rd level custom counter specific style */
	background: red;
	border-radius: 27px;
}

</style>

The HTML:

<ol>
<li>this is a list 1</li>
<li>this is a list 1
	<ol>
	<li>this is a list 2</li>
	<li>this is a list 2
		<ol>
		<li>this is a list 3</li>
		<li>this is a list 3</li>	
		<li>this is a list 3</li>	
		<li>this is a list 3</li>	
		</ol>
	</li>
	<li>this is a list 2</li>
	<li>this is a list 2</li>
	</ol>
</li>
<li>this is a list 1</li>
<li>this is a list 1</li>
<li>this is a list 1</li>
</ol>

Code Info

Rate this code:

Date Posted: 12/03/2012

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Commenting is not available in this weblog entry.