疑似要素で適用させたテキストをテキスト選択できるようにするには

疑似要素(:before, :after)のテキスト(content)を強調選択できるようにするにはどうすればよいのでしょうか？

試したコードは以下の通りです。ただし、以下は簡潔に書いたコードであり、span内にテキストを書けばよいということではありません。

html
1<span></span>
2<style>
3  span:before {
4    content: "こんにちは";
5  }
6</style>

これで、画面には「こんにちは」と表示されますが、テキスト選択はできない状態となっています。しかし、この状態でテキストを選択させるようにするには、HTML、CSSをどのように変更すればよいのでしょうか？
調べても何も出てこない状態です。
ちなみに、現在は要素に直接テキストを書いて代用しています。ただ、これを疑似要素に代えられないかという考えに至りました。

maisumakun

2023/06/27 00:04

> ちなみに、現在は要素に直接テキストを書いて代用しています。ただ、これを疑似要素に代えられないかという考えに至りました。なぜ疑似要素でなければならないのでしょうか？

shiketa

2023/06/27 00:26

DOMに含まれていないのでテキストを選択できないのでしょう。また、アクセシビリティを考慮するなら疑似要素にすることは不適切ですね。 https://developer.mozilla.org/ja/docs/Web/CSS/content > CSS で生成されるコンテンツは、 DOM には含まれません。そのため、これはアクセシビリティツリーでは表現されず、支援技術とブラウザーの組み合わせによってはアナウンスされないことがあります。そのコンテンツがページの目的を理解する上で重要な情報を含んでいるのであれば、メイン文書に含めたほうが適切です。

ypp

2023/07/03 11:13

> なぜ疑似要素でなければならないのでしょうか？現在1000人ほどのユーザーのオンライン状態をリアルタイムに表示させるサイトを作っていまして、例えば、 <div class="user" data-id="0"> <span>Username</span> <span>Online</span> </div> という要素が1000個あるとして、わざわざquerySelectorを使用してonlineの部分を変更するより、 <div class="user" data-id="0" style="--text: Online"> ... <span></span> ... <style> span:before { content: attr(--text); } </style> としたほうが効率がいいと思った次第です。

maisumakun

2023/07/03 11:33 編集

> としたほうが効率がいいわざわざstyle属性へ出力せずにHTMLへ直接書き出したほうが妥当だと思うのですが、それでは何が問題なのでしょうか？

ypp

2023/07/04 08:10

1000個の要素に対して各要素にqueryselectorを使用するより、その要素にstyleをつけるだけにしたほうが「早い」と思ったのですが。

maisumakun

2023/07/04 08:51

実際に速度差は確認したのですか？

ypp

2023/07/15 14:56

確認するも何も、後者は反映されないので比較できません。ちなみに、querySelectorでやったときは、createElementで一から作るより2倍の時間が必要でした。

行動規範の内容に同意します

回答3件

ベストアンサー

CSSの仕様に、user-selectを疑似要素に適用した時についてノートがあります。

Note: The UA may apply this property to the ::before and ::after pseudo-elements. If it does, the auto value maps to a used value of none on these pseudos, but other values can be specified. This preserves the legacy behavior of generated content not being selectable or copyable, which is appropriate when these pseudos are used for decorative purposes. However, this property allows them to become selectable and copyable, as the user would expect in cases where they are used to generate parts of the content, such as the issue numbers in this document.

To the extent possible, authors should avoid using generated content for non-decorative purposes, and should prefer including all the content in the DOM.

This feature is at risk.
CSS Basic User Interface Module Level 4

ということなのですが、実際のブラウザでは対応していないようです。mayなので、ブラウザは対応しても対応しなくてもよい、ということなのだと思います。

要するに、CSSでの解決手段はないと思います。

参考：

user-select は CSS のプロパティで、ユーザーがテキストを範囲選択できるかどうかを制御します。
user-select - CSS: カスケーディングスタイルシート | MDN

投稿2023/06/27 02:55

編集2023/06/27 02:56

Lhankor_Mhy

総合スコア37421

ulのように、選択させないから擬似要素なのでは？

css
1<style>
2span:before {
3content: "こんにちは";
4}
5</style>
6<ul>
7<li>佐藤さん</li>
8<li>鈴木くん</li>
9</ui>
10<span>佐藤さん</span>
11<span>鈴木くん</span>

投稿2023/06/27 00:24

yambejp

総合スコア117678

この回答はGPT-4による自動生成回答です

疑似要素のテキストは、通常のテキストとは異なり、選択できない仕様となっています。そのため、疑似要素のテキストを選択可能にすることはできません。

しかし、代替案として、JavaScriptを使用して疑似要素のテキストを通常のテキストに変換することができます。以下のコードを参考にしてください。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7  <style>
8    span:before {
9      content: "こんにちは";
10    }
11  </style>
12</head>
13<body>
14  <span></span>
15  <script>
16    const span = document.querySelector('span');
17    const pseudoContent = window.getComputedStyle(span, ':before').content.replace(/(^"|"$)/g, '');
18    span.innerHTML = pseudoContent;
19  </script>
20</body>
21</html>