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:

.faq {
	counter-reset: my-badass-counter;
}
.faq dt:before {
	content: counter(my-badass-counter);
	counter-increment: my-badass-counter;
}

Style the :before element as you will. For instance:

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:

disc (• • •)
circle (○ ○ ○)
square (▪ ▪ ▪)
decimal (1 2 3)
decimal-leading-zero (01, 02, 03)
lower-roman (i ii iii)
upper-roman (I II III)
lower-greek (α β γ)
lower-latin (a b c)
upper-latin (A B C)
armenian (Ա Բ Գ)
georgian (ა ბ გ)
lower-alpha (a b c)
upper-alpha (A B C)

All you need to do is specify which in the counter value itself:

content: counter(my-counter, lower-roman);

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:

/* 
  Examples from THE FUTURE
  No browser support at the time of this writing 
*/

li::marker { 
  width: 30px;
  text-align: right;
  margin-right: 10px;
  display: inline-block;
}

ol { 
  list-style: symbols("*" "\2020" "\2021" "\A7"); 
}

ul { 
  list-style-type: "★"; 
}