如何仅使用 CSS 制作类似代码编辑器的行号？

Question

下面这段代码是最有效的。但是，当我在行内键入时，假设光标位于单词的中间，如果我玩游戏并按回车键和退格键，两个数字将显示在一行上。是否有一种仅 CSS 的方法来修复此问题，使每行只有一个数字，并且行号仍然匹配？

pre {
    background: #303030;
    color: #f1f1f1;
    padding: 10px 16px;
    border-radius: 2px;
    -moz-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;
}

pre span {
  display: inline-block;
    line-height: 1.5rem;
    counter-increment: line;
}
pre span:before {
      
      content: counter(line);
      display: inline-block;

      padding: 0 .5em;
      margin-right: .5em;
      color: #888;

}

<pre contenteditable="true" spellcheck="false">
<span>lorem ipsum</span>
</pre>

Answer 1

更新：刚刚在 Firefox 上测试，布局不同，因此下面的代码片段没有对行进行编号。（FF 只是放入 <br> 而不是任何进一步的 HTML 结构）。

将此答案保留一段时间，以防它帮助某人获得适用于所有常见浏览器的一般答案。

原始答案：至少在 Edge/Chrome 上，额外的行似乎包含在 div 元素中。

此代码段对第一行进行编号，这只是一个跨度，与您所做的方式相同，但随后使用名为 line 的计数器对 pre 的 div 直接子项进行编号，而不是在包裹的跨度。

pre {
  background: #303030;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
  counter-reset: line 1;
}

pre>span::before {
  content: '1';
  display: inline-block;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888;
}

pre div {
  line-height: 1.5rem;
  counter-increment: line;
}

pre div::before {
  content: counter(line);
  display: inline-block;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888;
}

<pre contenteditable="true" spellcheck="false">
<span>lorem ipsum</span>
</pre>

如何仅使用 CSS 制作类似代码编辑器的行号？

How to make code editor-like line numbers using solely CSS?

css

text-editor

line-numbers