I recently received an email from Twitter which had a nice numbered list at the bottom. The numbers were in a different color to the text, and the numbers had a circle around them. Twitter probably went with images because of email client support, but I figured I’d have a go at converting the list to plain HTML and CSS.

I didn’t want any extra markup, just the basic <ol></ol> and <li></li> html tags. For the most part the whole thing was easy, but it could get complex if I were to try and support IE7 as I would need to use JavaScript to provide an alternative to CSS counters.

Here’s an embedded jsFiddle with the HTML, CSS, and Result.