Выровнять CSS по правому краю: цифры?

Question

Я хочу иметь пронумерованные абзацы, не прибегая к использованию упорядоченных списков. Я пытаюсь сделать это, используя content:counter(абзац) в CSS, чтобы каждый блок абзаца, который я создаю, генерировал число слева от него.

.pass {
  counter-reset:paragraph;
}

.pass p:before {
  content:counter(paragraph);
  position:absolute;
  font-size:0.6em;
  color:#999;
  margin-left:-3em;
  counter-increment: paragraph;
}

Это работает нормально, но проблема в том, что я не могу понять, как выровнять числа так, чтобы они все выровнялись вправо.

Так что вместо:

7   Content
8   Content
9   Content
10  Content

Я хочу, чтобы они выглядели так:

 7  Content
 8  Content
 9  Content
10  Content

Есть ли способ сделать это без OL и LI?

Answer 1

Установите ширину для класса:before, затем text-align: right. http://jsfiddle.net/QAX8m/

.pass {counter-reset:paragraph;}
.pass p {padding-left:40px;}
.pass p:before {
    content:counter(paragraph);
    counter-increment: paragraph;
    position:absolute;
    left:0;
    width:40px;
    text-align:right;
}