html - 在 ::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);
}