앞에 CSS를 맞 춥니 다 : 숫자?

Question

주문 된 목록을 사용하지 않고 번호가 매겨진 단락을 갖고 싶습니다. 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없이이 작업을 수행 할 수있는 방법이 있나요?

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; 
}