How to gain hanging indent list with CSS Counters?

I'm trying to build a 3 level ordered list with CSS counters.

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

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

Is there a way to accurately indent the 1st and 2nd level?

I know there is a way using something like

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

but the size of the counter changes with font-size or increasing numbers.

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

@Paulie_D got it right by positioning the pseudo-element:

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

Thank you.