:: before疑似要素を無視する:: select疑似セレクタ

Question

Clipboard.jsを使用して.containerの内容をユーザのクリップボードにコピーしています。私はこの.containerの::selection/::-moz-selectionと書式を設定しました。子要素はすべて、クリップボードへのコピー中に.select()です。

::before（おそらくは::after）の擬似要素を除いては素晴らしいです。 ::before多かれ少なかれ私のCSS宣言を無視します。 ::beforeのcounter CSSプロパティをcontentとして使用しています。

問題を公開しているスニペットです。私は問題を公開する必要はないので、JSは含まれていません。コードブロックをクリックしてドラッグすると、::before疑似要素を除いて、::selectionにコンテンツがハイライトされていないことがわかります。

::selectionの::before疑似要素が表示されないようにどのように表示することができますか？

編集：これはSafari/Chrome（おそらく-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>

Answer 1

あなたはスパンの分類 "の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/

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

理由疑似要素の選択色は、セレクタ内で擬似要素を1つしか使用できないためです。どちら::選択と::前にこの定義のもとに来るのではなく、::選択のようなpseudo-classさ：アクティブは、この@jonnowためhttps://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements