将代码行号与CSS对齐

Question

我正在尝试使用纯CSS方法（不使用JavaScript）在我的网站（https://qscintilla.com/custom-lexer-example/）的代码段中插入行号。

正如您在上面的屏幕截图中看到的那样，我正在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;
}

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

<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>

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

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

我怎样才能解决这个问题？

Answer 1

如果您想要纯CSS解决方案，则只有一种方法：使用固定宽度的解决方案，即在::before伪元素上显式声明一个宽度。但是，这种方法永远不会过时，因为您将不得不考虑计数器可能会出现3、4或更多位数的情况。

pre {
  counter-reset: line;
}

code {
  counter-increment: line;
}

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

<pre>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
</pre>