html - CSS3 制作 :before content not highlightable

Question

== 由 60.0.3112.90 版中的 Chrome 修复 ==

-Chrome BUG-

错误报告:https://bugs.chromium.org/p/chromium/issues/detail?id=703807&can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

好的，所以我一直致力于一个具有 CSS 行号的元素。当用户突出显示/选择文本时，数字也会突出显示/选择。幸运的是 :before 内容没有被复制，但它仍然让我很烦。有什么办法可以解决这个问题。

注:pre为contenteditable='true'

我尝试过的:

user-select: none;

还有

pre code:before::selection {

    background: transparent;

}

这是一些示例代码:

<pre contenteditable='true'><code>bla</code><code>bla</code><code>bla</code></pre>

<style>
    pre {
        margin: 0px;
        outline: none;
    }

    pre code {
        display: block;
        color: #a9b7c6;
        counter-increment: line;
    }

    pre code:before {
        content: '\00a0'counter(line)'\00a0';
        margin-right: 2px;
        border-right: solid #4b4b4b 1px;
    }
</style>

现在的样子:

它应该是什么样子:

Answer 1

你应该包含一个 MCVE在你的问题中。现在还不清楚出了什么问题。我无法重现您的问题，请参阅以下代码段。

请注意，pre 为 contentEditable与让每一行都是单独的 code 元素结合得不是很好。我假设你正在通过 JavaScript 处理这个？还是我误解了你的做法？

在任何情况下，以下(甚至不使用 user-select: none)似乎对我有用(在 Firefox 和 Chrome 中，截屏是在火狐)。

pre, code {
  margin: 0;
  padding: 0;
}

pre {
  font-size: 0;
}

pre code {
  counter-increment: line;
  font-size: 1rem;
}

pre code:before {
  content: counter(line)".";
  margin-right: .5rem;
  padding-right: .2rem;
  border-right: 1px solid #ccc;
}

<pre contenteditable="true">
  <code>a line 1</code>
  <code>a line 2</code>
  <code>a line 3</code>
  <code>a line 4</code>
  <code>a line 5</code>
  <code>a line 6</code>
</pre>

---

编辑。我实际上可以在 Chrome 中重现该问题。看起来只有计数器被选择突出显示，任何其他内容都没有。也就是说，在下面的代码片段中，点没有突出显示。如果我将 content: counter(line)"." 替换为 content: "1."，则选择将按预期忽略伪元素。始终选择计数器。它不受 ::selection 样式的影响任何一个。这对我来说就像是 Chrome 中的一个错误——尽管当然在 CSS 规范中没有任何关于文本选择的保证(user-select 和 ::selection 都只在draft for CSS4-UI )...但是伪元素中的文本真的不应该是可选的。

你可以 open a bug report .看看他们怎么说。

我唯一能为您提供的是解决方法。希望它仍然有帮助。它将行号放在一个完全独立的元素中。现在需要使用 JavaScript 维护行号。既然你说你已经有了处理编辑的脚本，我想为什么不也编写脚本呢？

* {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
}

.editor {
  position: relative;
}

html {
  font-size: 18px; /* define font size for rem */
}

pre {
  padding-left: 2rem;
  font-size: 0;
}

pre code {
  font-size: 1rem;
  line-height: 1.3rem;
}

lines {
  position: absolute;
  top: 0;
  left: 0;
}

line {
  display: block;
  padding-right: .2rem;
  border-right: 1px solid #ccc;
  font-family: monospace;
  font-size: 1rem;
  line-height: 1.3rem;
  
     -moz-user-select: none;
      -ms-user-select: none;
  -webkit-user-select: none;
          user-select: none;
}

<div class="editor">
  <pre contenteditable="true">
    <code>a line 1</code>
    <code>a line 2</code>
    <code>a line 3</code>
    <code>a line 4</code>
    <code>a line 5</code>
    <code>a line 6</code>
  </pre>
  <lines>
    <line>1.</line>
    <line>2.</line>
    <line>3.</line>
    <line>4.</line>
    <line>5.</line>
    <line>6.</line>
  </lines>
</div>