33

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

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

4

3 に答える 3

17

いいえ、できません。

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

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

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

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

于 2014-10-27T07:10:27.277 に答える
4

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

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

http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/ Using_data_attributes

于 2014-06-24T11:57:09.473 に答える