CSS 카운터를 사용하여 들여 쓰기 목록을 얻는 방법은 무엇입니까?

Question

CSS 카운터가있는 3 레벨 순서 목록을 작성하려고합니다.

ol { 
counter-reset: paragraph; 
list-style-type: none; 
margin-bottom: 1em; 
font-weight: bold; 
} 

ol > li::before { 
counter-increment: paragraph; 
content: "§" counter(paragraph) " "; 
} 
... 

1 단계와 2 단계를 정확하게 들여 쓰려면 방법이 있습니까? 내가 아는

는

text-indent: -10px; padding-left: 10px; 

같은 것을 사용하는 방법하지만 글꼴 크기 나 수가 증가와 카운터의 크기가 변경이 있습니다.

http://codepen.io/ekadagami/pen/ezZEbo

Answer 1

@Paulie_D 바로 의사 요소를 배치하여 그것을 가지고 :

ol > li { 
    position: relative; 
} 

ol > li::before { 
    counter-increment: paragraph; 
    content: "§" counter(paragraph) " "; 
    position: absolute; 
    left: -1.5em; 
} 

http://codepen.io/Paulie-D/pen/oLxGeW

감사합니다.