如何使用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) " "; 
} 
... 

是否有一種方法可以準確地縮進第一和第二級別？

我知道有使用的東西的方式一樣

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

謝謝。