::选择伪选择器忽略::伪元素之前

我正在使用Clipboard.js将.container的内容复制到用户的剪贴板。我已将::selection/::-moz-selection设置为此.container的样式，并且它是子元素，因为在复制到剪贴板过程中所有子元素均为.select()。::选择伪选择器忽略::伪元素之前

除了在::before（大概是::after）伪元素之外，它工作良好。 ::before或多或少地忽略了我的css声明。我使用::before中的counter css属性作为content。

下面是暴露问题的代码片段。我没有包含任何JS，因为它没有必要公开这个问题。点击并拖动代码块，您将看到::selection上没有内容突出显示，但::before伪元素除外。

任何人都可以告诉我如何覆盖::selection的::before伪元素，使其不可见？

编辑：这似乎是一个Safari /铬（大概-webkit-问题）。在进行一些隔离测试后，不会在Firefox中发生。

.html.container { 
 
\t position: relative; 
 
\t display: block; 
 
\t padding: .9375rem .9375rem .9375rem 2.5rem; 
 
\t margin-bottom: 20px; 
 
\t background: rgba(38, 38, 38, .08); 
 
\t counter-reset: lines; 
 
} 
 
.html.container::before { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t top: 0; 
 
    left: 0; 
 
\t width: 5px; 
 
\t height: 100%; 
 
\t background: grey; 
 
} 
 

 
.html.syntax { 
 
\t display: block; 
 
\t border-left: .0625rem solid black; 
 
} 
 

 
.html.syntax *::selection { 
 
\t background: transparent; 
 
\t color: inherit; 
 
} 
 

 
.html.syntax *::-moz-selection { 
 
\t background: transparent; 
 
\t color: inherit; 
 
} 
 

 
.html.line::before { 
 
\t content: counter(lines); 
 
\t position: absolute; 
 
\t left: 5px; 
 
\t width: 25px; 
 
    color: grey; 
 
\t text-align: right; 
 
\t transition: all .25s ease; 
 
} 
 
.html.line { 
 
\t display: block; 
 
\t padding-left: 15; 
 
\t counter-increment: lines; 
 
} 
 

 
.html.line::before::selection { 
 
\t background: transparent; 
 
\t color: inherit; 
 
} 
 

 
.html.syntax::before::-moz-selection { 
 
\t background: transparent; 
 
\t color: inherit; 
 
}

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

来源

2017-01-23 danMad

您可以在 “HTML线” 使用的数据属性归类跨度，这样可以防止数字出现在Chrome中选择。这样做的缺点是你失去了CSS计数器自动递增的行号：

<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/