Html 在：：before伪元素中右对齐CSS计数器

我使用CSS计数器和

标记来显示自动生成行号的语法突出显示的代码段：

HTML:

它最多可以工作9行，但一旦达到两位数，就会失去对齐：

如何使线的左边缘对齐？还是将行号右对齐

我已经试过了：

• 计数器（行，十进制前导零）

  -它最多可以工作99行，但在100行时中断，我不喜欢它的外观
• 使用JavaScript更改内容，但是

  getComputedStyle（第行，，：before'）。内容只返回
  “counter（第行）”

---

您可以使用

显示：内联块和
宽度
根据您的实际需要：

演示：

这很好用！我还使用了
text align:right
和
code.long
类来处理更长的代码片段，这会增加数字的可用宽度。很高兴能为您提供帮助！
<code>
 <div class="line"><span>line 1</span></div>
 <div class="line"><span>line 2</span></div>
 ...
</code>

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

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