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

Question

I'm using CSS counters and the <code> tag to show syntax highlighted code snippets with 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 well up to 9 lines, but once it hits two digits, it gets out of alignment:

How can I make the left edges of the lines align? Or right-align the line numbers?

I've already tried:

• counter(line, decimal-leading-zero) - it works up to 99 lines, but it breaks at 100, and I don't like the way it looks
• Altering the content with JavaScript, but getComputedStyle(line, '::before').content just returns "counter(line)"

Answer 1

You can use display:inline-block; and a width based on your 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);
}