Creating Fancy Checkmark Icons with Pure CSS3

I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists. I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted to figure out another way to do it (plus, the challenge sounded kind of fun).

I had just seen Nicolas Gallagher’s awesome pure css social media icons, though, and I thought, “If he can do that, than I could certainly create a simple check icon with just css3″. I did figure it out with some experimenting and testing, and today I’m going to show you how to achieve the same effect.

The #1 Rule of CSS3 Coding

Before we start on any project, we have to remember the number one rule of CSS3 coding. Well, actually it’s two rules:

It must be cross-browser acceptable. I’m not talking identical, but a CSS3 technique is not very useful if it destroys the experience for users with older browsers. Use progressive enhancement.
No worthless markup! I know CSS3 is fun, and it’s not bad to experiment, but if you have to add a whole bunch of non-semantic junk markup just to save yourself from needing to use an image, you’ve defeated the point.

These are the two principles that I regard to be the unchangeable law for using CSS3. So anyways, enough of my rant – I just feel with all the buzz about CSS3 that it’s very important to use it in a mature and responsible way. Let’s move on with the tutorial.

The Concept

Before we can start coding, we have to figure out what approach we’re going to take to create these icons. How is it going to be done?

Taking some inspiration from Nicolas Gallagher’s work, I think the best way would be to use the :before and :after pseudoclasses to generate the round circle and the checkmark shape. By using the unicode no-break-space (\00a0) as the content attribute, and the setting the display to block and styling it, we can create a huge variety of empty shapes. A checkmark icon lays well inside the boundaries of possiblity!

Also, in order to implement surefire progressive enhancement we’re going to use the :nth-of-type selector to make sure that only CSS3 capable browsers try to display the icons (older browsers will fall back on simple, default bullet-points). The :nth-of-type is a lifesaver and hugely useful for this, because the support for it lines up exactly with support for the border-radius and transform properties that will be necessary to render the icons.

The Code

OK, now that we’ve got the general concept figured out, we can start coding. We’ll start with the html for a basic, unordered list (copied from html-ipsum.com).

<ul>
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>

We’ll start with a very basic CSS style that will be applied to all browsers:

ul{
margin: 12px;
padding: 0;
}
ul li{
margin: 0 0 12px 0;
font-size: .9em;
line-height: 1em;
}

Now, onto the fun part. First, we’ll style the list items (for CSS3 browsers only) to have additional padding on the left (to make room for the icons), to be positioned relatively so that we can absolutely position the icons, and to hide the default bullets:

body:nth-of-type(1) ul li{
list-style-type:none;
padding: 0 0 0 45px;
position:relative;
}

Now, using the :before pseudoclass we’ll add a small black circle to the left of each list-item – the first half of the icon. We use before so that it will nest behind the checkmark, which will be generated using :after. Here’s the code:

body:nth-of-type(1) ul li:before{
/*fill it with a blank space*/
content:"\00a0";

/*make it a block element*/
display: block;

/*adding an 8px round border to a 0x0 element creates an 8px circle*/
border: solid 9px #000;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
height: 0;
width: 0;

/*Now position it on the left of the list item, and center it vertically
(so that it will work with multiple line list-items)*/
position: absolute;
left: 7px;
top: 40%;
margin-top: -8px;
}

All that’s left is to create the checkmark and put it on top of the circle. We can do that very easily by giving the :after element a white border on the bottom and left, and then rotating it 45 degrees:

body:nth-of-type(1) ul li:after{
/*Add another block-level blank space*/
content:"\00a0";
display:block;

/*Make it a small rectangle so the border will create an L-shape*/
width: 3px;
height: 6px;

/*Add a white border on the bottom and left, creating that 'L' */
border: solid #fff;
border-width: 0 2px 2px 0;

/*Position it on top of the circle*/
position:absolute;
left: 14px;
top: 40%;
margin-top: -4px;

/*Rotate the L 45 degrees to turn it into a checkmark*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

We’re finsished! Here’s what the final product looks like:

All that remains now is to integrate it into your design (changing the border colors of the before/after elements if need be)!

Some Thoughts

So that’s it. In closing I have a few thoughts about this technique:

On the downside, relying on the :nth-of-type selector is a bit risky, since a browser that recognized that selector but didn’t support CSS rounded corners and rotation would end up rendering a distorted version of the icon. Some older versions of Opera have this problem. I think that’s a pretty small issue, though, since I’m not aware of any browsers (and certainly not any with more than negligible market share) that fit that description. Also, it could be argued that it’s not worth it just to avoid using one small checkmark image. I don’t think that’s necessarily true, but it is something to consider (for reference, the css code that created the icons is .57kb when compressed).

Overall, though, I think it’s a stylish, imageless touch that could fit well into a lot of design situations. It’s a creative use of CSS3, it doesn’t require extra markup, and it degrades with near perfect gracefulness, so overall I’m proud of the idea and think it’s pretty robust.

What are your thoughts? Do you think it’s a good idea? I’m looking forward to your feedback!

Written By Nick Parsons

Nick is the editor of Webitect and a developer + designer from Houston TX.

73 Comments

Jay
June 15th, 2010 at 06:59 pm
Awesome technique. As always so unselfish, thanks for sharing. J
Bill
June 15th, 2010 at 07:10 pm
Fun Stuff. The code example is missing a comment block terminator on the “position it on top of the circle”
Nick Parsons
June 15th, 2010 at 07:29 pm
@Jay – Thanks, man, glad you enjoyed!

@Bill – Good catch, it’s fixed now.
Bill
June 15th, 2010 at 07:40 pm
It’s cool and twisted. If it were class based, it could be used with red x’s, or blank and checked, for applications…
Fecundvs
June 16th, 2010 at 04:13 am
I like this, although I think in practice I would just use an image for this type of list (one single image for all items). I agree with Bill that it becomes more useful with classes to have different icons and it would be even better for a numbered list where images for each item becomes impractical (1, 2, 3 or 10, 20, 30 or A, B, C etc) especially if you want numbers out of order (3, 4, 1, 2 for example).

Thanks.
Jacob
June 16th, 2010 at 08:25 am
That’s pretty slick. Nice work. I can definitely think of a few ways to mod this to meet my ‘needs’. Thanks.
Catherine Azzarello
June 16th, 2010 at 10:45 am
Really cool puzzle solving! Isn’t CSS a fun game?
ErnieChiara
June 16th, 2010 at 11:23 am
I agree with Fecundvs. While the realm of possibilities has continued to expand through CSS3 (which is exciting), IMHO using a simple image of only a few kb in this instance would not only suffice, but could be made as ‘fancy’ as you like and be viewed in all browsers. Thus is really nice work, though, and could be very useful for numbered lists, etc. as Fecundvs points out. Thanks for sharing! Keep up the good work!
Cosmin Negoita
June 16th, 2010 at 12:19 pm
I’m actually loving this tutorial. It’s simple but still effecting and good looking. Thank you!
B. Moore
June 16th, 2010 at 01:22 pm
No live demo?
I see you have check marks on your site here but they are not the css3 version.
What better demo than using it on your own site…
Nick Parsons
June 16th, 2010 at 01:32 pm
@Bill – That’s a great idea. I might post a follow up with some more varieties included.

@Fecundvs and @ErnieChiara – You’re absolutely right. It’s an interesting possibility, but in a some cases would just not be worth the trouble. I’m glad you liked the idea, though!

@Catherine Azzarello – Sure is! I love seeing all the cool things that can be done with it.

@B. Moore – I actually created this for a ThemeForest template I’m working on, so you’ll be able to check it out live once I get that finished.
Jae Xavier
June 16th, 2010 at 05:43 pm
Cool tutorial. Can’t wait to try it out.

Thanks
Beben
June 16th, 2010 at 11:07 pm
i am agree with B.Moore, its not work in HTML Editor my friend (what’s wrong?)
may be..:D
Webstandard-Blog
June 17th, 2010 at 02:20 am
The pure css social media icons of Nicolas Gallagher are awesome, that’s true. But 20KB (CSS-File) only for some icons? That’s a little bit to much, or not? Sprite-Grafic for the Icons and some CSS-lines, is definitely less than 20KB.
Jaap
June 18th, 2010 at 09:25 am
Why didn’t you use some UTF8 special characters? Most browsers should be OK with that now, that way, you can delete the whole :after thing at the end and just use this: (Hope it correctly displays this in the comment.)

body:nth-of-type(1) ul li:before{ /*fill it with a check mark*/ content:"✔"; color: snow; background-color: black; padding: 4px;
/*make it a block element*/ display: block; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px;
/*Now position it on the left of the list item, and center it vertically (so that it will work with multiple line list-items)*/ position: absolute; left: 7px; top: 40%; margin-top: -8px; }
Jaap
June 18th, 2010 at 09:31 am
One additional remark I forgot to make in my previous comment: you can then use either ✓ or ✔ as checkmark. And it also gives you the option to create an additional class which shows a (red) mark, for instance one of these: ✗, ✖, ✕.

(I was a bit shocked to see that you were doing so much work just to create a check mark, nonetheless, it is very creatively thought of and made!)
Nick Parsons
July 2nd, 2010 at 12:03 pm
@Webstandard-Blog – I wasn’t suggesting that Gallagher’s icons were good for practical use, merely stating that they were a creative experiment. You’re right, they’re rather overboard for real-life use when an image would be much smaller and would work cross-browser.

@Jaap – That’s an excellent point, I’m not sure why I didn’t think of that. Guess I just had one of those “duh” moments. Thanks for mentioning it! That certainly makes the technique a lot more widely useful. Good thinking
Joomla Web Developers
July 20th, 2010 at 11:27 pm
good stuff of css but the code is bit long for the 20 KB thing..can any body make it little bit less lines of coding for me here…
Drupal Web Developers
July 26th, 2010 at 07:13 am
Thanks for the coding jaap,i was looking for some one to answer differently you made it here,i learnt how to implement some special characters into the coding part..
cathy tibbles
August 17th, 2010 at 10:56 am
Very good tutorial and easy to follow. Thankyou. (Not sure its practical, but who cares?)
Justin
August 18th, 2010 at 01:30 pm
AWESOME tut. Just discovered this site and I think I will take a look around.
Scott
September 4th, 2010 at 07:25 am
Ha, this first thing I thought when I started reading was “why not use UTF8?” As Jaap pointed out there are several “Wingdings” in Unicode. The first port of call any time you want to insert a symbol like that should be your Character Map

In addition to ✓ and ✔ there are even “ready-boxed” checks: ☑ and ☒

Peace out y’all ☮
harryplusk
September 4th, 2010 at 07:40 am
*p.s. The HTML code of the reference part is “Unordered list: Short items” and look like this (i deleted the signs):
ul
li Bethel Park schools: Readin’ and writin’ and iPads [post-gazette.com] /li
li Explore Space with NASA HD for iPad [mashable] /li
/ul
Cory
September 4th, 2010 at 10:21 am
Excellent article and inspiring. Based on some of the comments, I took my shot at extending it and it appears to work rather well.

http://corydorning.com/blog/creating-list-icons-pure-css3
Thomas
September 5th, 2010 at 06:53 am
While I like digging into new techniques such this one, I would consider list-style-image as better choice to create this effect. Less risky, less code and after all much simpler to use.
Jessicashen
September 17th, 2010 at 01:38 am
AWESOME tut. Just discovered this site and I think I will take a look around. Fun Game,isn’t it ?

there is a good website to buy your favoruite sports shoes amd branded clothes
http://www.ajfshoes.com
Robert Tobys
September 20th, 2010 at 10:21 am
Great tut. This was just what I needed. Thanks for sharing!
thomas
January 25th, 2011 at 07:41 am
No live demo?
Faraz
March 20th, 2011 at 04:07 am
I like the way of explaining in this tutorial,very resourceful and useful post for css beginners and even experts.
Raju
May 2nd, 2011 at 07:36 am
Really super posting…
Lance
May 8th, 2011 at 01:06 pm
The ✗ ✖ ✕ ✓ or ✔ Jaap suggests is more elegant. Another step would be to attach a custom font containing just the few bullet characters. In that case you could even redefine x and y as ✗ and ✓. The extra file weight would be minimal especially in you used the technique for other icons.

body:nth-of-type(1) ul li:before{
content:”x”;
font-family: “MyIcons”;
display: block;
border: solid 9px #000;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
height: 0;
width: 0;
position: absolute;
left: 7px;
top: 40%;
margin-top: -8px;
}
designarti
July 25th, 2011 at 12:22 am
So many characters to use and get wonderful effects with the rotate option…
Excellent technique!
Luke
August 15th, 2011 at 03:11 pm
Amazing what can be done with css now ie has stopped holding back web development.
Bryan Salva
August 19th, 2011 at 11:20 am
Neither these icons or Gallagher’s social icons are practical yet (except possibly in some mobile applications) thanks to browser differences. That being said they look great, are coded well and make for an awesome concept. Good work!
Mark
March 22nd, 2012 at 09:27 am
Great demo. It’s amazing how a few simple images can clean up the page design.
Derek
April 8th, 2012 at 06:23 pm
One item to note–when I tried this in IE9, the checkmark wasn’t rotated. After adding “-ms-transform: rotate(45deg);”, everything worked like a charm.
Agência de comunicação Sonna Creative
April 26th, 2012 at 04:31 pm
Great! Very interesting!
bellakristen
April 30th, 2012 at 03:37 am
I Love the way you designed.Really impressive.Good!
Gautam Lakum
May 12th, 2012 at 05:29 am
Really helpful. I was bored using default check icons. will try this
Adam Zoa
May 31st, 2012 at 05:48 am
Well narrated information and it’s very good idea. Also it’ll will help in making awesome check icons. As soon as possible i’d like to implement this. Thanks Nick.
reihhana
August 14th, 2012 at 09:19 pm
I ve just started learning CSS3 … it s much funner than CSS … you can creat bunch of thing using coding only ! Thanks a lot
Jeff Woodruff
September 19th, 2012 at 08:19 pm
This tutorial will definitely come in handy. I never realized you could do this will straight up css3. Thanks for sharing.
Jake
October 28th, 2012 at 08:40 pm
Thanks! This is fantastic. Really great idea.
Vipul
November 16th, 2012 at 05:25 am
Grete post. Thank you for sharing this information
David
December 24th, 2012 at 08:00 am
Great tut, just what I was looking for. Thanks
Gute-Mathe-Fragen
January 18th, 2013 at 05:41 am
What a great idea to make a checkmark by rotating it, brilliant!

For guys who need a demo, check http://jsfiddle.net/9Euyp/
Moazam
April 16th, 2013 at 08:02 am
Thanks Gute! I was looking for demo This link should be inside the post
Takagami
October 13th, 2013 at 03:17 pm
The problem I am running into is using this code on a site, like wordpress. The theme I am using makes heavy use of and elements all throughout the page. When I use this code, even embeded on one page, it applies to all of the and elements. How would I go about using this on only 5 elements and not the other 35 on the page?
Takagami
October 13th, 2013 at 03:24 pm
There should be some ul’s and li’s in there… you really should have a preview option for comments…
Rasmus Schultz
October 15th, 2013 at 10:01 am
Man, that’s really creative

This works too though:

ul { list-style-type: none; }
ul > li:before { content: “2714″; }

Add a background/color/border-radius to the li-rule, and you’re done
Anil
December 12th, 2013 at 10:09 pm
Here is simplest one:

ul {padding-bottom:15px; padding-top:15px; position:relative;}
ul li{padding-left:25px; margin-bottom:5px;}
ul li:before{content: “\2713020″; color:#000000; background-color:#cccccc; border-radius:50%; text-align:center; padding-left:4px; padding-right:4px; position:absolute; left:0px; display:inline-block;}
bo jackson shoes for sale
August 17th, 2014 at 10:58 am
Hermes Birkin Black Hardware http://centresportsetloisirs.com/images/user/e6fecc45f3834acbbd458eb7d4291375.asp