CSS3 ordered list styles

February 13, 2012 by Catalin Rosu - 58 comments

Styling ordered lists was always a tricky task and I’m not the only one who thinks that. To style numbers you need to remove default browser styles and add hooks to your lists elements in order to target them and style accordingly.

In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.

The idea

When I first read Roger Johansson’s article about styling ordered list numbers, I must admit I seriously felt in love with that technique. Using that technique, I will try to go a bit further and show you two different styling possibilities for ordered lists.

View demo

The HTML

Below you’ll find nothing than simple ordered list markup:

<ol class="rounded-list">
	<li><a href="">List item</a></li>
	<li><a href="">List item</a></li>
	<li><a href="">List item</a>
		<ol>
			<li><a href="">List sub item</a></li>
			<li><a href="">List sub item</a></li>
			<li><a href="">List sub item</a></li>
		</ol>
	</li>
	<li><a href="">List item</a></li>
	<li><a href="">List item</a></li>						
</ol>

The CSS

Further, I’ll try to explain how this works in a few words.

This technique uses Automatic counters and numbering. Basically it’s about using two CSS 2.1 properties: counter-reset (this initiate a counter) and counter-increment (kinda self-explanatory, this increments the previous counter). As you will see below, the counter-increment will be used along with CSS generated content (pseudo-elements).

ol{
	counter-reset: li; /* Initiate a counter */
	list-style: none; /* Remove default numbering */
	*list-style: decimal; /* Keep using default numbering for IE6/7 */
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0;
	margin-bottom: 4em;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol{
	margin: 0 0 0 2em; /* Add some left margin for inner lists */
}

Rounded-shaped numbers

.rounded-list a{
	position: relative;
	display: block;
	padding: .4em .4em .4em 2em;
	*padding: .4em;
	margin: .5em 0;
	background: #ddd;
	color: #444;
	text-decoration: none;
	border-radius: .3em;
	transition: all .3s ease-out;	
}

.rounded-list a:hover{
	background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);	
}

.rounded-list a:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;	
	left: -1.3em;
	top: 50%;
	margin-top: -1.3em;
	background: #87ceeb;
	height: 2em;
	width: 2em;
	line-height: 2em;
	border: .3em solid #fff;
	text-align: center;
	font-weight: bold;
	border-radius: 2em;
	transition: all .3s ease-out;
}

Rectangle-shaped numbers

.rectangle-list a{
	position: relative;
	display: block;
	padding: .4em .4em .4em .8em;
	*padding: .4em;
	margin: .5em 0 .5em 2.5em;
	background: #ddd;
	color: #444;
	text-decoration: none;
	transition: all .3s ease-out;	
}

.rectangle-list a:hover{
	background: #eee;
}	

.rectangle-list a:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;	
	left: -2.5em;
	top: 50%;
	margin-top: -1em;
	background: #fa8072;
	height: 2em;
	width: 2em;
	line-height: 2em;
	text-align: center;
	font-weight: bold;
}

.rectangle-list a:after{
	position: absolute;	
	content: '';
	border: .5em solid transparent;
	left: -1em;
	top: 50%;
	margin-top: -.5em;
	transition: all .3s ease-out;				
}

.rectangle-list a:hover:after{
	left: -.5em;
	border-left-color: #fa8072;				
}

Circle-shaped numbers

.circle-list li{
    padding: 2.5em;
    border-bottom: 1px dashed #ccc;
}

.circle-list h2{
    position: relative;
    margin: 0;
}

.circle-list p{
    margin: 0;
}

.circle-list h2:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;    
    z-index: -1;
    left: -1.3em;
    top: -.8em;
    background: #f5f5f5;
    height: 1.5em;
    width: 1.5em;
    border: .1em solid rgba(0,0,0,.05);
    text-align: center;
    font: italic bold 1em/1.5em Georgia, Serif;
    color: #ccc;
    border-radius: 1.5em;
    transition: all .2s ease-out;    
}

.circle-list li:hover h2:before{
    background-color: #ffd797;
    border-color: rgba(0,0,0,.08);
    border-width: .2em;
    color: #444;
    transform: scale(1.5);
}

Small bonus

Some CSS3 numbers animations are also included in this demo. Unfortunately, as far as I know and at this time, Firefox is the only one who supports animated pseudo-elements. Let’s hope that will improve sooner or later.

Browser support

These list looks well also on older browsers, as you can see below:

View demo

That’s all!

Thank you all for reading and I hope you enjoyed it. Feel free to share your thoughts, I appreciate your comments.

If you enjoyed this article, get updates via RSS or email (it's free).

58 thoughts on “CSS3 ordered list styles”

Andrea on February 13, 2012 at 12:21 said:

.rounded-list a:hover:before{
transform: rotate(360deg);
}
can you explain me this, please?
I use Chrome (last version) and I can’t see anything that rotate around.. argh!
Reply ↓
- Red on February 13, 2012 at 13:27 said:
  
  Andrea, as I mentioned above, these pseudo-elements animations are visible only on Mozilla Firefox.
  Reply ↓
  - Andrea on February 13, 2012 at 14:13 said:
    
    ops.. i’m sorry.
    Reply ↓
  - redplanet on February 20, 2013 at 15:58 said:
    
    Maybe this works for chrome:
    -webkit-transform: rotate(360deg);
    Reply ↓
RajaSekar on February 13, 2012 at 18:54 said:

Awesome! CSS3 Effect
Reply ↓
- Red on February 14, 2012 at 17:01 said:
  
  Thanks, I’m glad you like it. Regarding your question, I’m sure there are so many tuts about how to create WP themes in the wild. ;)
  Reply ↓
RajaSekar on February 13, 2012 at 18:56 said:

Hi Red do you have any idea to create wp themes?
Reply ↓
Edin on February 13, 2012 at 19:54 said:

You’re like a God, Red.
Reply ↓
- Red on February 14, 2012 at 17:04 said:
  
  Hi Edin, thanks for your kind comment.
  Reply ↓
Nimsrules on February 13, 2012 at 20:18 said:

Super awesome post as usual Red. Fabulous implementation of psuedo-elements in CSS. You always come up with innovative tutorials.
Reply ↓
- Red on February 14, 2012 at 17:07 said:
  
  Thank you Nimrules.
  I always try to do my best and I’m happy to read all your comments regarding the articles I write.
  Reply ↓
  - Nimsrules on February 20, 2012 at 19:35 said:
    
    I wanna write a tutorial on my blog on how to incorporate these sexy ol lists in blogger powered blogs, of course with your permission (I’ll have to use the same CSS you’ve described above). I’ll include the credits as well.
    Reply ↓
a. brock on February 14, 2012 at 01:56 said:

Why can’t we have tab stops as with print design? Why why why why? This business of the text blocks not aligning with the numbers is ridiculous and unacceptable. Why are tab stops forbidden online? Thanks.
Reply ↓
monmohon on February 14, 2012 at 16:27 said:

thanks!
Reply ↓
Przemek Sakrajda on February 14, 2012 at 22:36 said:

Very nice! Thank you!
Reply ↓
Alexandre on February 15, 2012 at 11:12 said:

Awesome as always! Too bad animations on :after/:before elements are only supported on Firefox…
Does anyone know if a future support is considered?
Reply ↓
- Red on February 15, 2012 at 14:18 said:
  
  Alexandre, there are open issues regarding this matter and let’s hope they will be updated soon.
  Reply ↓
  - Alexandre on February 15, 2012 at 14:59 said:
    
    Thank you for your answer, Red! I also noticed some other little issues still with pseudo-elements, I mean with the triangle trick: on Chrome they look properly placed but appear misplaced on FF/Opera.
    Reply ↓
Ammar Ali on February 15, 2012 at 12:12 said:

Awesome list styles. But only one drawback is it is un sported in chrome while most of peoples are using chrome.
Reply ↓
- Red on February 15, 2012 at 14:15 said:
  
  This demo is fully supported in Chrome. Please be aware that discussion is only about pseudo-elements animations (which works only in Firefox for now).
  Reply ↓
Mountainweb on February 15, 2012 at 14:05 said:

Great examples, clean and they work. Nice touch on the use of CSS Comments, might toss in a few more. I have found that the use of CSS comments is a big help in website maintenance, solves the “wonder why I added that class?” puzzled look at a later date….
Reply ↓
Alisha on February 15, 2012 at 19:21 said:

I love your idea! I actually tried adding it to my website but it doesn’t work correctly. There’s no animation like there is here (I use Firefox). Still, it looks nice!
Reply ↓
- Alisha on February 16, 2012 at 22:52 said:
  
  Correction: the circle bullets don’t spin, but the square bullets do have animation.
  Reply ↓
  - Red on February 16, 2012 at 22:55 said:
    
    Hey Alisha, please check your styles. I think you’re missing this part: .rounded-list a:hover:before{-moz-transform: rotate(360deg)}.
    Good luck!
    Reply ↓
    - Alisha on February 17, 2012 at 01:35 said:
      
      You were right that I didn’t have the correct code. I must’ve deleted part of it on accident. However, the circle still doesn’t rotate. Does it matter that I replaced the .rounded-list a part with .rounded-list li? I am using it as a bullet list style rather than a way to display links.
      This is the line of code that I have for that section:
      .rounded-list li:hover:before {-moz-transform: rotate(360deg)}
      It doesn’t bother me that the number doesn’t rotate because it looks awesome as is. I’m just trying to figure out what I did to mess it up in the first place. :)
      Reply ↓
      - Red on February 17, 2012 at 09:46 said:
        
        Alisha, also you need to add -moz-transition: all .3s ease-out; for .rounded-list li to properly see the circle rotating on Firefox.
        Please check the demo page source for the full code, the article does not contain the CSS prefixed properties.
      - Alisha on February 17, 2012 at 23:52 said:
        
        :face palm: Thanks for your help! Dunno why I didn’t do that in the first place.
Stev Newbury on February 27, 2012 at 17:42 said:

Great article Red, animated pseudo-elements create a great effect – yet so simple – I’m certainly looking forward to wider support!
I would like to use your examples in a post for my own site if I may? With links back as credit of course!
Reply ↓
airen on February 29, 2012 at 17:15 said:

I haven’t come to you here,today I again learned many new knowledge.Thank you very much for you write so good tutorial.I will be translated into Chinese and put it on my blog:http://www.w3cplus.com.
Reply ↓
Michael Calkins on March 6, 2012 at 01:16 said:

Man this is awesome!! Keep pushing the limits of CSS3!
Reply ↓
- Red on March 6, 2012 at 09:08 said:
  
  Thank you guys, nice to hear you like it! ;)
  Reply ↓
Blurzschyter on March 15, 2012 at 19:05 said:

How to change list-style of a sub-list to use lower-roman ?
Reply ↓
- Red on March 15, 2012 at 19:36 said:
  
  Actually, you can’t do that along with this technique. But to use lower roman, use list-style: upper-roman
  Reply ↓
korosh on March 30, 2012 at 12:13 said:

hi
rtl
Persian theme text problem
Reply ↓
Dany on March 30, 2012 at 12:18 said:

Hello,
cool animations!
my prefer is Rounded-shaped numbers
it rocks!
Thx
Reply ↓
Norvik on April 16, 2012 at 10:28 said:

Thanks for the css3 code! :)
Reply ↓
cristy on June 4, 2012 at 15:12 said:

wonderful!!
Reply ↓
acepek on June 15, 2012 at 03:11 said:

Super useful info on customizing ordered lists.
I had better luck removing the “z-index:-1;”. Otherwise I was getting some strange display issues (which probably will vary depending on what layout the list is in).
Thanks!
Reply ↓
Guppu Boss on September 25, 2012 at 11:14 said:

Nice colorful list. I will use it on my blog thanks for the code
Reply ↓
Fraakz on September 25, 2012 at 21:05 said:

Thanks for the code. This ordered list looks amazing in Mozilla Firefox.
Reply ↓
frappa on October 10, 2012 at 14:19 said:

thank you very much for sharing this great piece of knowledge! exactly what i needed for my page.
Reply ↓
Marin Kolev on November 24, 2012 at 20:06 said:

Hi there,
How to use this code without ?
Reply ↓
Martin Kolev on November 26, 2012 at 06:38 said:

sorry, without links inside…
Reply ↓
- Catalin Rosu on November 28, 2012 at 09:13 said:
  
  Martin, use the li element instead of a in your CSS ;)
  Reply ↓
  - Martin Kolev on November 28, 2012 at 09:16 said:
    
    Thanks, but i have another li in my css
    Reply ↓
sonia on December 12, 2012 at 13:53 said:

it’s just awesome!!
Reply ↓
Abdul Rahman on January 29, 2013 at 05:49 said:

Thanks I will give it a try because I am having some troubles with the CSS execution in Firefox and I agree Opera and Safari does not support pseudo elements. Anyways the ordered list looks very beautiful and surely will try to make one for my web project.
Reply ↓
Ondra on February 8, 2013 at 21:34 said:

Hi Red, I like the rotation list a lot. Are you sure that it’s not possible use it in Chrome? I just asking because I saw working rotations here http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html in Chrome. So I think there is a way. But I have no idea how to do it :(
Reply ↓
- Catalin Rosu on February 20, 2013 at 16:48 said:
  
  Yep, the browser support has change since I wrote this article. I think I’m going to update this soon.
  Thanks for the heads up!
  Reply ↓
Pablo Villoslada Puigcerber on February 13, 2013 at 14:51 said:

Awesome! Thanks for sharing dude.
Reply ↓
- Catalin Rosu on February 20, 2013 at 16:47 said:
  
  I’m glad you like it ;)
  Reply ↓
redplanet on February 20, 2013 at 15:57 said:

I would like to flattr this blog post.
Get a flattr-button
Reply ↓
- Catalin Rosu on February 20, 2013 at 16:47 said:
  
  Thanks for your suggestion but I’m not planning to add a flattr button anytime soon. I think the existing social ones are enough.
  Still, you can buy me a beer anytime! :)
  Reply ↓
Ramona on March 23, 2013 at 17:53 said:

How can I style an unordered list so that it looks similar.In the blue field I want to place a word, e. g. WordPress. The grey area is for more text, e. g. “some plugin tips . blabla”.
Thanks in advance.
Reply ↓
Angela on April 5, 2013 at 06:14 said:

Thanks for the great article! Would you please explain how the “arrow effect” (on rectangle-list hover) is being generated in the css? How does “border-left-color” make the illusion of a triangle? I don’t see anything being rotated either. Thanks!
Reply ↓
Moazam on April 16, 2013 at 18:13 said:

Looks great, I was looking for circled unordered list but found this article. Great tutorial! +1
Reply ↓
Sufian on April 17, 2013 at 22:38 said:

thanks for the code.
Reply ↓
Susan on May 11, 2013 at 00:14 said:

How would the code for the blue one be for an unordered list?
I dont want to replace the numbers with anything, just want it to be empty blue boxes with those animated(or unanimated) pointers. I can´t quite work it out myself.
Reply ↓