54531


CSSでスタイル付けをしている際にリストの先頭にそれぞれ共通するテキストがあるのでこれを擬似要素で作ろうと思いました

[code]

    li::before
    {
        content: "共通テキスト";
    }
    
[/code]

[code]

    <ul>
        <li>項目A</li>
        <li>項目B</li>
        <li>項目C</li>
    </ul>
    
[/code]

そのままだと擬似要素のテキストだけコピーできないようなのですがなぜコピーできないのでしょうか?  
追加のCSSかJSを使う必要がありますか?それとも擬似要素以外を使う方がいいですか?

※開発者ツールを使えば選択できるようです


CC BY-SA 4.0
2019-04-27T10:26:02.153
54523
2019-05-03T09:28:37.760
2019-04-28T01:38:13.307
3060
34069
question
html css html5
:before, :after 疑似要素をコピーさせることができるか？


## なぜ `before`, `after` 擬似要素のテキストがコピー出来ないのか

`before`, `after` 擬似要素のテキストがコピー出来ない理由は、端的にいえば、 **ドキュメントツリーにそれらの内容が存在しないから**
です。以下でもう少し詳細に説明します。

まず、 [Cascading Style Sheets Level 2 Revision 2](https://www.w3.org/TR/CSS22/)
の 12 章によれば、 **コンテンツは 2 つの方法により生成** されます。1 つは `content` プロパティを持つ `before`,
`after` 擬似要素により生成され、もう 1 つは `display` プロパティに `list-item` 値を持つ要素により生成されます。

> ### [12 Generated content, automatic numbering, and
> lists](https://www.w3.org/TR/CSS22/generate.html#generated-text)
>
> 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](https://www.w3.org/TR/CSS22/)
の 12 章 2 節によれば、これらの方法で生成されたコンテンツは、 **ドキュメントツリーを変更しません** 。

> ### [12.2 The 'content'
> property](https://www.w3.org/TR/CSS22/generate.html#content)
>
> 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](https://www.w3.org/TR/CSS22/conform.html#doctree)**  
>  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 ページのコンテンツは、ドキュメントツリーに存在することにより、ブラウザを通してクリック、選択などの操作を行うことが出来ます。

> ### [§ 4.1. Introduction to "The
> DOM"](https://dom.spec.whatwg.org/#introduction-to-the-dom)
>
> 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](https://www.w3.org/TR/css-content-3/)
では、「生成されるコンテンツは検索可能、選択可能、そして支援技術により利用可能であるべき」とされています。

なので、いつの日か `before`, `after` 擬似要素のテキストをコピー出来るようになるかもしれません。

> ### [§ 1.1. Accessibility of Generated Content](https://www.w3.org/TR/css-
> content-3/#accessibility)
>
> 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
が変更された場合にもそのコンテンツが利用可能であるべき** です。

> ### [Failure of Success Criterion 1.3.1 due to inserting non-decorative
> content by using :before and :after pseudo-elements and the 'content'
> property in CSS](https://www.w3.org/WAI/WCAG21/Techniques/failures/F87)
>
> 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.

* * *

参考:

  * [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification](https://www.w3.org/TR/CSS22/)
  * [DOM Standard](https://dom.spec.whatwg.org/)
  * [CSS Generated Content Module Level 3](https://www.w3.org/TR/css-content-3/)
  * [Techniques for WCAG 2.1](https://www.w3.org/WAI/WCAG21/Techniques/)


CC BY-SA 4.0
2019-04-27T23:07:27.127
54531
2019-05-03T09:28:37.760
2020-06-17T08:14:45.997
-1
32986
54523
answer