右前对齐:: before伪元素中的CSS计数器

Question

我正在使用CSS计数器和<code>标记来显示带有自动生成的行号的语法高亮显示的代码段：

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);
}

它可以很好地工作9行，但是一旦它达到两位数，就会失去对齐：

如何使线条的左边缘对齐？或者右对齐行号？

我已经尝试过了：

• counter(line, decimal-leading-zero) - 它可以运行多达99行，但它在100处断开，我不喜欢它的样子
• 使用JavaScript更改内容，但getComputedStyle(line, '::before').content只返回"counter(line)"

Answer 1

您可以根据实际需要使用display:inline-block;和width：

演示： 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);
}