CSS3 Making :before content not highlightable - html

Question

== FIXED BY CHROME IN VERSION 60.0.3112.90 ==
-CHROME BUG-
bug reported: 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=
Okay, so I've been working on a project that has CSS line numbers. When users highlight/select text the numbers get highlighted/selected as well. Luckily the :before content doesn't get copied with it, but it still annoys me. Is there any way to fix this.
Notes: Pre is contenteditable='true'
What I have tried:
user-select: none;
AS WELL AS
pre code:before::selection {
background: transparent;
}
This is some example code:
<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>
What it looks like now:
What it should look like:

Answer 1

You should have included an MCVE in your question. It is now not clear what goes wrong. I cannot reproduce your problem, please see the below snippet.
Note that having the pre be contentEditable does not combine very well with having every line be a separate code element. I am assuming that you are handling this via JavaScript? Or am I misunderstanding what you do?
In any case, the below (that does not even use user-select: none) seems to work for me (in Firefox and Chrome, screenshot is taken in Firefox).
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>
Edit. I can actually reproduce the issue in Chrome. It looks like only the counter is highlighted by the selection, any other content is not. That is, in the below snippet, the dot is not highlighted. If I replace the content: counter(line)"." with, say, content: "1.", then the selection ignores the pseudo-elements as expected. The counter is always selected. It is not impacted by styling of ::selection either. This smells like a bug in Chrome to me - although nothing is guaranteed about text selection in the CSS spec of course (user-select and ::selection are both only in the draft for CSS4-UI)... But text in pseudo-elements should really not be selectable.
You could open a bug report. See what they say.
The only thing I can offer you is a workaround. Hope it still helps. It puts the line numbers in a completely separate element. The line numbers now need to be maintained using JavaScript. Since you state that you already have scripts in place to handle editing, I figured why not script this too?
* {
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>

Answer 2

It might not work because you forgot the prefixes:
pre code::before {
content: counter(line);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
If that doesn't work:
pre code::before {
content: counter(line);
pointer-events: none;
}