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).

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:

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:

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!

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).

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!

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.

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.)

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!)

@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

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

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.

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!

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?

What is Webitect?

Hi, and welcome! Webitect is a blog devoted, very simply, to producing fresh, high-quality content for web designers and developers. We do our very best to give you the tools, resources, inspiration and tutorials that you're looking for.