将代码行号与CSS对齐

我试图使用纯CSS方法（无javascript）在我的网站（）的代码片段中插入行号：

正如你在上面的截图上看到的，我正在用Wordpress建立我的网站。我使用最新Wordpress版本的“附加CSS”功能插入自定义CSS。以下是我的自定义CSS：

pre{
    counter-reset: line;
}
code{
    counter-increment: line;
}
code:before{
    content: counter(line);
    display: inline-block;
    border-right: 1px solid #ddd;
    padding: 0 .5em;
    margin-right: .5em;
    color: #888;
    -webkit-user-select: none;
}

<pre>
<code> This is my first codeline </code>
<code> This is my second codeline </code>
<code> This is my third codeline </code>
<code> This is my fourth codeline </code>
</pre>

当我在HTML中插入代码片段时，效果非常好，如下所示：

不幸的是，当代码行达到两位数时，行号没有正确对齐。让我们放大这个问题：

当然，当代码行从两位数跳到三位数时也会出现同样的问题

---

如何解决此问题？

如果您想要纯CSS解决方案，只有一种方法：使用固定宽度解决方案，即在

：：before

伪元素上显式声明宽度。但是，这种方法永远不会成为未来的证明，因为您必须考虑计数器可能会达到3、4或更多位数的情况

pre{
计数器复位：行；
}
代码{
计数器增量：行；
}
代码：：之前{
内容：柜台（行）；
显示：内联块；
宽度：1.5em；/*固定宽度*/
右边框：1px实心#ddd；
填充：0.5em；
右边距：.5em；
颜色：#888；
-webkit用户选择：无；
}

---

您可以使用CSS网格来完成。行号的宽度会动态增加，这样以后就不会出现大的行号错误。看看下面

pre{
计数器复位：第0行；
显示：网格；
网格模板列：最小内容1fr；
网格自动行：1em；
间隙：0.3em；
}
.行号{
文本对齐：右对齐；
}
.行号：：之前{
计数器增量：行；
内容：柜台（行）；
空白：预处理；
颜色：#888；
填充：0.5em；
右边框：1px实心#ddd；
}

---

谢谢@Terry！这确实不是未来的证据，但对我的情况来说已经足够了。顺便问一下，为什么使用双

：

而不是单个

：

？这实际上是伪元素与选择器的更新约定（CSS3）。伪元素应该有双冒号

：

（例如

：：before

和

：：after

），而伪选择器应该只有一个冒号（例如

：hover

，

：focus

，

：valid

）。请注意，internet explorer 7和8将不会与

：：before

一起使用，而是与

：before

一起使用。另一方面，如果您真的想要一个经得起未来考验的解决方案，除了更改DOM之外，没有其他方法。例如，GitHub使用表布局来显示行号和代码。