Numbering In Style

Chances are if you want to number things in order on a website, the ordered list (<ol>) is your guy. It also is pretty reasonable that you want to style those numbers. Strangely enough, styling those list numbers isn't a very easy thing to in CSS. Thankfully it's also not impossible. Roger Johansson has a tutorial that shows how it can be done with the :before pseudo element, which can have a counter as a value to the content property.

But let it be known, applying numbered counters is not limited to ordered lists. For instance, let's say you wanted to number the question and answer pairs of a FAQ list.

You'd have markup like this:

<dl class="faq">
<dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
<dd>1,000,000</dd>
<dt>What is the air-speed velocity of an unladen swallow?</dt>
<dd>What do you mean? An African or European swallow?</dd>
<dt>Why did the chicken cross the road?</dt>
<dd>To get to the other side</dd>
</dl>

Each new <dt> element is a new question, hence where we should apply the numbering. It's as simple as this:

Just wanted to make ya'll aware of this ability. You start thinking of all kinds of things to number once it's sunk in. For instance I recently blogged one of my favorite recipes and I numbered each step/photo with blocky roman numerals.Which reminds me: the numbers don't have to be decimals. They can be anything that list-style-type can be. Namely:

The Future

The stuff above is cool and in the Use-It-Today™ camp. But it almost feels hacky when you look at the leap forward CSS3 lists is taking. Once browser support for that comes along, we'll be able to do things like target the marker of the list at will:

Chris… according to Wolfram Alpha (their source is given) – a Woodchuck can chuck 361,9237001 cubic centimeters of wood – (if he could chuck wood that is) – NOT the “1,000,000” which you list. Just FYI, in case you feel like correcting your obviously inadvertent faux pas.

This technique is not highly recommend due to the WCAG 2.0 requirements in Web Accessibility. How does the deaf / blind user would know that list is actually #1 out of 3 when this technique doesn’t generate the actual text or value that has the number in it. I would highly discourage using this technique.

This comment thread is closed. If you have important information to share, please contact us.