なぜ before
, after
擬似要素のテキストがコピー出来ないのか
before
, after
擬似要素のテキストがコピー出来ない理由は、端的にいえば、ドキュメントツリーにそれらの内容が存在しないからです。以下でもう少し詳細に説明します。
まず、 Cascading Style Sheets Level 2 Revision 2 の 12 章によれば、コンテンツは 2 つの方法により生成されます。1 つは content
プロパティを持つ before
, after
擬似要素により生成され、もう 1 つは display
プロパティに list-item
値を持つ要素により生成されます。
In CSS 2.2, content may be generated by two mechanisms:
- The 'content' property, in conjunction with the :before and :after pseudo-elements.
- Elements with a value of 'list-item' for the 'display' property.
また、 Cascading Style Sheets Level 2 Revision 2 の 12 章 2 節によれば、これらの方法で生成されたコンテンツは、ドキュメントツリーを変更しません。
This property is used with the :before and :after pseudo-elements to generate content in a document.
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).
ドキュメントツリーとは、簡単にいえば、 HTML を階層化したものです。
Document tree
The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none.
生成されるコンテンツがドキュメントツリーを変更しないということは、言い換えれば、生成されるコンテンツがドキュメントツリーに存在しないことになります。
Web ページのコンテンツは、ドキュメントツリーに存在することにより、ブラウザを通してクリック、選択などの操作を行うことが出来ます。
In its original sense, "The DOM" is an API for accessing and manipulating documents (in particular, HTML and XML documents). In this specification, the term "document" is used for any markup-based resource, ranging from short static documents to long essays or reports with rich multimedia, as well as to fully-fledged interactive applications.
Each such document is represented as a node tree. Some of the nodes in a tree can have children, while others are always leaves.
そのため、ドキュメントツリーに存在しない生成されるコンテンツは、文字選択やクリックなどの操作を行えません。
ただし、 2019 年 4 月 28 日現在 Working Draft である CSS Generated Content Module Level 3 では、「生成されるコンテンツは検索可能、選択可能、そして支援技術により利用可能であるべき」とされています。
なので、いつの日か before
, after
擬似要素のテキストをコピー出来るようになるかもしれません。
Generated content should be searchable, selectable, and available to assistive technologies. The content property applies to speech and generated content must be rendered for speech output. [CSS3-SPEECH]
共通のテキストを擬似要素でマークアップすることの是非
その「共通するテキスト」が装飾目的ではなく、文書内の文章の一部を構成するものなのであれば、利用者によって CSS が変更された場合にもそのコンテンツが利用可能であるべきです。
The CSS :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted. For users who need to customize style information in order to view content according to their needs, they may not be able to access the information that is inserted using CSS. Therefore, it is a failure to use these properties to insert non-decorative content.
参考: