html - Right-align CSS counters in ::before pseudo-element -

i'm using css counters , <code> tag show syntax highlighted code snippets automatically generated line numbers:

jsfiddle

html:

<code>  <div class="line"><span>line 1</span></div>  <div class="line"><span>line 2</span></div>  ... </code> 

css:

code {     display: inline-block;     border: 1px black solid;     padding: 1em;     font-family: "consolas", "monaco", "courier new", monospace;      counter-reset: line; }  code .line {     display: block;      counter-increment: line; }  code .line::before {     border-right: 1px black solid;     padding-right: 1em;     margin-right: 1em;      content: counter(line); } 

it works 9 lines, once hits 2 digits, gets out of alignment:

how can make left edges of lines align? or right-align line numbers?

i've tried:

• counter(line, decimal-leading-zero) - works 99 lines, breaks @ 100, , don't way looks
• altering content javascript, getcomputedstyle(line, '::before').content returns "counter(line)"

you can use display:inline-block; , width based on practical needs:

demo: http://jsfiddle.net/zxsxu/14/

code .line::before {     display:inline-block;     width:2em;     border-right: 1px black solid;     padding-right: 1em;     margin-right: 1em;     content: counter(line); }