html - CSSで生成されたコンテンツを選択することはできますか?

Question

マークアップがあるとしましょう：

<div data-generated="world!">Hello </div>

..CSS を使用:

div:after {
    content: attr(data-generated);
}

これにより、次のテキストが生成されます。 Hello world! -フィドル

div:after {
    content: attr(data-generated);
}

<div data-generated="world!">Hello </div>

しかし...

テキストを選択/コピーしようとすると、「hello」部分のみが選択可能です。

ここに画像の説明を入力

CSSで生成されたテキストを選択する方法はありますか?

注意:

1)生成されたコンテンツに関する~~仕様 (こことここ) を見ましたが、この問題への言及は見当たりませんでした。~~

こことここの仕様は、生成されたコンテンツは選択可能であるべきだと言っているようです

生成されたコンテンツは、検索可能で選択可能であり、支援技術で利用できる必要があります

2) この質問に対する答えが「いいえ - それは不可能です」の場合 - これを述べている信頼できる情報源へのリンクをお願いします。

score 17 · Accepted Answer

いいえ、できません。

jQuery を使用した ::before や ::after などの CSS 疑似要素の選択と操作を参照してください。そこで説明されていることを繰り返しますが、生成されたコンテンツは DOM の一部ではありません。

CSS2.1仕様の言葉で言えば、

生成されたコンテンツはドキュメントツリーを変更しません。

生成されたコンテンツは、レンダリングエンジンの視覚的な世界にのみ存在します。選択とは、DOM の一部を選択することです。生成されたコンテンツは DOM にないため、選択できません。同じ理由で、生成されたカウンターまたはリストアイテムの箇条書きは選択できません。

score 4 · Accepted Answer

data支援技術がそれらにアクセスできない可能性があるため、属性に表示およびアクセス可能であるべきコンテンツを保存しないでください

これらのリンクを確認してください:

3 に答える 3