Wie bekomme ich hängende Einrückungsliste mit CSS-Zählern?

Question

Ich versuche, eine 3-stufige geordnete Liste mit CSS-Zählern zu erstellen.

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

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

Gibt es eine Möglichkeit, die erste und zweite Ebene genau einzudrücken?

Ich weiß, es ist eine Möglichkeit, so etwas wie

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

aber die Größe des Zählers ändert sich mit font-size oder steigende Zahlen.

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

Answer 1

@Paulie_D es richtig durch das Pseudoelement Positionierung:

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

Danke.