在 ::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)"

- Tom Smilack

Answer 1

你可以使用 display:inline-block; 和根据实际需要设定的width: 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);
}

- Arbel

---

这个完美地运作了！我还使用了 text-align: right 和 code.long 类来处理更长的代码片段，这样可以增加数字的可用宽度。 - Tom Smilack

很高兴能够帮助到您！ - Arbel