Нумерация с помощью CSS (простой счетчик)

Достаточно часто в процессе создания сайта появляется необходимость пронумеровать различные пункты сайта. Сделать это можно вручную, но этот способ занимает не мало времени, особенно тогда, когда на странице с большим количеством пронумерованных пунктов нужно добавить еще несколько. В этом случае придется всю нумерацию переписывать заново. Но можно пойти другим путем, на котором нам в помощь придут CSS счетчики. C помощью данной возможности CSS, этот процесс автоматизируется.
Меньше слов, больше дела, переходим к коду.

CSS- код:

body { 
	counter-reset: section;
}
.counter {
	counter-increment: section;
}
.counter:before { 
	content: counter(section) "  ";
}

Разберем код:

body { counter-reset: section;}

В этой строке мы устанавливаем значение счетчика для body на ноль и присваиваем название счетчику – section. Название может быть любым.
Также в этой строке можно задать число, с которого будет начинаться отсчет. Например если хотите, чтобы отсчет начинался с пяти, нужно привести строку к виду:

body { counter-reset: section 4; }

В строке

.counter {counter-increment: section;}

мы определяем элемент, который будет нумероваться. Так же в этой строке можно установить значение на которое будет увеличиваться счетчик. Если счетчик должен увеличиваться на 3 с каждым шагом, нужно записать строку так:

.counter {counter-increment: section 3;}

Строка

.counter:before {content: counter(section) "  ";}

отвечает за отображение счетчика.

Теперь нужно присвоить класс тем элементам, которые должны нумероваться.

HTML-код:

<div class="counter"></div>
<div class="counter"></div>
<div class="counter"></div>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64