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

ありがとうございました。