Нумерация в CSS

Самый простой способ - использовать нумерованный список ol.

1. кошка
2. собака

<ol>
<li>кошка</li>
<li>собака</li>
</ol>

Атрибут start установит номер, с которого начнётся список. Для li его аналог value.

3. конь
10. корова

<ol start="3">
<li>конь</li>
<li value="10">корова</li>
</ol>

Атрибут type определит вид маркера как для ol, так и для отдельного пункта li.

type="A"	type="a"	type="I"	type="i"	type="1"
пункт пункт пункт	пункт пункт пункт	пункт пункт пункт	пункт пункт пункт	пункт пункт пункт

Для ненумерованного списка ul другие маркеры. Это условно, браузеры в настоящее время поддерживают любой вариант type для ul и ol.

type="disc"	type="circle"	type="square"
пункт пункт пункт	пункт пункт пункт	пункт пункт пункт

Также можно воспользоваться свойством list-style к тегам, которым присвоено display: list-item. Первое его значение показывает вид маркера, а именно:

armenian	georgian	decimal	decimal-leading-zero	lower-greek
пункт пункт пункт	пункт пункт пункт	пункт пункт пункт	пункт пункт пункт	пункт пункт пункт
lower-alpha	upper-alpha	lower-roman	upper-roman	none
пункт пункт пункт	пункт пункт пункт	пункт пункт пункт	пункт пункт пункт	пункт пункт пункт
circle	disc	square	url(адрес_изо)
пункт пункт пункт	пункт пункт пункт	пункт пункт пункт	пункт пункт пункт

Второе определяет будет ли маркер вынесен за границы элемента. По умолчанию outside.

1. пункт
2. пункт
3. пункт

<ol>
   <li style="list-style: upper-latin outside;">пункт</li>
   <li style="list-style: lower-latin inside;">пункт</li>
   <li style="list-style: upper-latin;">пункт</li>
</ol>

А теперь коснёмся автоматической нумерации, сразу перейдя к образцу.

<style type="text/css">
  .numer { 
    counter-reset: schetchik 1;    /* задаётся имя и начальное значение отсчёта, по умолчанию 0 */
    }

  .numer dt {position: relative; padding-right: 20px; background: #f4f1e9; border-top:1px solid #666;}

  .numer dt:after {    /* это стиль числа, обязательно с :before или :after */
    content: " - " counter(schetchik, upper-alpha) " - ";    /* вставляется знак " - ", имя счётчика, определяется тип маркера и снова " - " */
    counter-increment: schetchik 2;    /* задаётся имя и значение, на которое будет увеличиваться счётчик, по умолчанию 1 */
    position: absolute;
    right: 0; top: 0;
    color: #f4f1e9;
    background: #666;
    } 
</style>

<dl class="numer">
<dt>Заголовок</dt>
<dd>Содержание</dd>
<dt>Заголовок</dt>
<dd>Содержание</dd>
<dt>Заголовок</dt>
<dd>Содержание</dd> 
</dl>

Зачем

Единственная причина, по которой имеет смысл так усложнять - красивый вид счётчика. К нему можно применить любые стили, скажем, расположить справа.

Пример

Где можно применить? Например, в комментариях (практическое применение).

Последствия

К теме поведенческих факторов: на такой список обратишь внимание. Фоновые же изображения к каждой цыфре добавлять не экономично.

Сноска CSS Автоматическая нумерация строк таблицы