::selection 伪选择器忽略 ::before 伪元素

Question

I am using Clipboard.js to copy a .container 's contents to the user's clipboard. I have styled the ::selection / ::-moz-selection of this .container and it's child elements as all child elements are .select() ed during the copy to clipboard process.

It works great except for on ::before (and presumably ::after ) pseudo elements. ::before more or less ignores my css declarations. I am using the counter css property in ::before as content .

Here is a snippet exposing the issue. I have not included any JS as it is not necessary to expose the issue. Click and drag on the code block and you will see that no content is highlighted on ::selection except for the ::before pseudo element.

Can anyone show me how to override ::selection of ::before pseudo element so that it is not visible?

Edit: This seems to be a Safari/Chrome (presumably -webkit- issue). Not happening in Firefox after doing a bit of isolation testing.

 .html.container { position: relative; display: block; padding: .9375rem .9375rem .9375rem 2.5rem; margin-bottom: 20px; background: rgba(38, 38, 38, .08); counter-reset: lines; } .html.container::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: grey; } .html.syntax { display: block; border-left: .0625rem solid black; } .html.syntax *::selection { background: transparent; color: inherit; } .html.syntax *::-moz-selection { background: transparent; color: inherit; } .html.line::before { content: counter(lines); position: absolute; left: 5px; width: 25px; color: grey; text-align: right; transition: all .25s ease; } .html.line { display: block; padding-left: 15; counter-increment: lines; } .html.line::before::selection { background: transparent; color: inherit; } .html.syntax::before::-moz-selection { background: transparent; color: inherit; }

 <div class="js html container" data-clipboard-target="#\\<h1\\>"> <code class="html syntax" id="<h1>"> <span class="html line"> <span class="html comment">&lt;!-- Heading level 1 --&gt;</span> </span> <span class="html line"> &lt;<span class="html tag">h1</span>&gt;Heading level 1&lt;<span class="html tag">/h1</span>&gt; </span> </code> </div>

Answer 1

You can use a data attribute on the "html line" classed span, this prevents the number from appearing in the selection in Chrome. The downside to this is you'll lose the CSS counter to auto-increment the line numbers:

<div class="js html container" data-clipboard-target="#\<h1\>">
    <code class="html syntax" id="<h1>">
        <span class="html line" data-pseudo-content="1">
            <span class="html comment">&lt;!-- Heading level 1 --&gt;</span>
        </span>
        <span class="html line" data-pseudo-content="2">
            &lt;<span class="html tag">h1</span>&gt;Heading level 1&lt;<span class="html tag">/h1</span>&gt;
        </span>
    </code>
</div>

https://jsfiddle.net/ohyj81c4/

ref https://danoc.me/blog/css-prevent-copy/

The reason you can't change the pseudo element selection colour is because you can only use 1 pseudo-element in a selector. Both ::selection and ::before come under this definition, rather than ::selection being apseudo-class like :active, :visited etc.

ref: https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements