右对齐CSS之前:数字?

时间:2013-09-24 19:50:51

标签: css pseudo-element css-content

我希望编号段落不使用有序列表。我试图通过在CSS中使用内容:counter(段落)来实现这一点,这样我创建的每个段落块都会在其左侧生成一个数字。

.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,有没有办法实现这个目标?

1 个答案:

答案 0 :(得分:7)

设置:class之前的宽度,然后是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;
}