将代码行号与CSS对齐

Question

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

正如您在上面的屏幕截图中看到的，我在Wordpress中构建我的网站。我使用＆＃34;附加CSS＆＃34;最新的Wordpress版本的功能，以插入自定义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>

Answer 2

您可以使用CSS Grid来实现。行号的宽度会动态增加，因此将来使用大号时不会出现任何错误。在下面看看；

pre {
  counter-reset: line 0;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-auto-rows: 1em;
  gap: 0.3em;
}

.line-number {
  text-align: right;
}

.line-number::before {
  counter-increment: line;
  content: counter(line);
  white-space: pre;
  color: #888;
  padding: 0 .5em;
  border-right: 1px solid #ddd;
}

<pre>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
<span class="line-number"></span>
<code>Code</code>
</pre>