右对齐 CSS 之前:数字? [英] right-align CSS before: numbers?

问题描述

我想在不使用有序列表的情况下对段落进行编号.我试图通过在 CSS 中使用 content:counter(paragraph) 来实现这一点，这样我创建的每个段落块都会在它的左侧生成一个数字.

I want to have numbered paragraphs without resorting to using ordered lists. I'm trying to accomplish this by using content:counter(paragraph) in CSS so that every paragraph block I create generates a number to the left of it.

.pass {
  counter-reset:paragraph;
}

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

它工作正常，但问题是我不知道如何对齐数字以使它们都向右对齐.

It works fine, but the problem is I can't figure out how to align the numbers so that they all align to the right.

所以代替:

7   Content
8   Content
9   Content
10  Content

我希望它们看起来像这样:

I want them to look like this:

 7  Content
 8  Content
 9  Content
10  Content

有没有办法在没有 OL 和 LI 的情况下做到这一点?

Is there a way to accomplish this without OL and LI?

推荐答案

设置 :before 类的宽度，然后设置 text-align:right.http://jsfiddle.net/QAX8m/

Set a width for the :before class, then 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;
}

这篇关于右对齐 CSS 之前:数字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！