Reguarding discussion on paragraph 7.1: content-selection
https://www.w3.org/TR/css-ui-4/#content-selection
Issues have been raised over selectable pseudo elements. The feature has been marked with "this feature is at risk".
I would like to point out that more and more often, content-creators are pressed to add content of their page though a pseudo elements. Think about blockquotes for wich quotes are provided using ::before and ::after, and it would make no sense not to print that content or not no copy that content, since it would no longer be a proper quotation.
Bullet points or enummeration for listed items are also relevant when printing the page or when copying the page, otherwise the seperation between list items, or even their enummeration would no longer be clear.
https://jsfiddle.net/wth8jv7a/12/
<blockquote>
Some day he will get it working
</blockquote>
- noone ever
<p>
Lorum Ipsum went for a walk
</p>
Suspect has been found quilty on the following counts:
<ol>
<li>Has aknoledged he was indeed aware that the pie should have been taken out of the oven within 1 hour</li>
<li>Was aware the timer was not set</li>
<li>Had opertunity to walk to the kitchen and take the pie out of the oven</li>
</ol>
Suspect refutes count 3., but the judge ruled otherwise. Suspect has been found quilty of burning an aplle pie, and is hereby convicted to baking a new apple pie within 3 months after this ruling.
blockquote, q {
quotes: "“" "”" "‘" "’";
-webkit-user-select: text; /* Chrome 49+ */
-moz-user-select: text; /* Firefox 43+ */
-ms-user-select: text; /* No support yet */
user-select: text;
}
blockquote::before , q::before {
content: open-quote;
-webkit-user-select: text; /* Chrome 49+ */
-moz-user-select: text; /* Firefox 43+ */
-ms-user-select: text; /* No support yet */
user-select: text;
}
blockquote::after , q::after {
content: close-quote;
-webkit-user-select: text; /* Chrome 49+ */
-moz-user-select: text; /* Firefox 43+ */
-ms-user-select: text; /* No support yet */
user-select: text;
}
/* not a pseudo element, so is already perfectly selectable */
p:first-letter {
font-size: 3em;
}
/* could manually add the numbers using pseudo elements, if that is waht it takes, but than again, pseudo elements are also not selectable (yet). */
ol::before, li::before {
-webkit-user-select: text; /* Chrome 49+ */
-moz-user-select: text; /* Firefox 43+ */
-ms-user-select: text; /* No support yet */
user-select: text;
}
I hope this points out there is already a number of unmet use cases for selectable pseudo elements. This is something many have been looking forward to. Hopefully we can overcome the issues which have been raised, as moving over quotations or enumerations to the DOM would be a break with ealier agreed conventions such as enumeration of list elements in ordered lists, and quoatations, being acomplished using pseudo elements.
Thanks for the feedback.
I think it is well established that authors would like this. Your examples illustrate it quite well.
The main problem is not the lack of use cases, but the way selections work. Selections are a range between two points in the DOM. But pseudo elements are not in the DOM, so there is a tension there. That does not necessarily make it impossible, but it does make it more complicated than just saying that they apply.
Am aware of the why. The difficulty here is that pseudo elements were meant to be just that; pseudo, no real elements.
In my opinion, the issue is not finally geting debated fully over this draft, where it should have been debated at the time "quotes:" was introduced for blockquotes. enummaration of list items existed ahead of the whole issue, but should now also be part of this debate how to proceed.
The point of raising this issue was to show that either we do make speudo elements selectable, or we stay true to the nature of spesudo elements, but also follow through by rethinking the way we apply quotation marks to blockquotes and citations, and the way we apply numerals to list items.
We need to start recognising quotation marks and numerals as actual content. In what manner we should do so, is the debate which needs to take place.
I have even much more sophisticated example, rather than just "selectable quotes". Long story short: I really wanted pseudo elements to be selectable. It's shame they are not :(
_For those who are interested in my particular use-case, long story long_: I have a blog, and posts are stored as simple markdown files, so they are easily viewable through github, with more cool view, features, etc. I still want my blog to be shown in a similar way as it's shown on github, but yet, - with some slight style changes, so I:
I wanted to add some subtitle for images with my styles, so I've started with this markdown:

Seems like enough markup. I wanted the result to be something like this:
<p><img src="https://jerrygreen.me/jerrygreen-512.png" alt="My photo hint text for a photo"></p>
"I can do this pretty easily", - I thought. The border is very beginner-level thing, so I omit this part. Though the subtitle is unexpectedly very tricky. I wanted to use some html like this:
p > img::after { /* spoiler: won't work */
display: block;
content: attr(alt);
text-align: center;
}
Turns out [we live not in future enough](https://stackoverflow.com/a/7396482/3720305) (check out comments for the linked answer):
> [CSS] specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). **This will be defined in more detail in a future specification**
But eons passed, and this still isn't defined: it's still not possible to do pseudo elements on `img` tags. Shame. Then I thought: "Ok then... I'll just use very simple html. Markdown supports simple html, right?", so I came up with this html and css:
<p title="My photo hint text for a photo" align="center">
<img src="https://jerrygreen.me/jerrygreen-512.png" alt="My photo" />
</p>
<style>
p[title]::after { /* now I apply pseudo element on `p`, not an `img`, so it works now */
display: block;
content: attr(title); /* and I use `title` attribute instead of `alt`, it's more canonical for `p` tag */
text-align: center;
}
</style>
"And it gives me exactly what I wanted", - I thought:
<p align="center">
<img src="https://jerrygreen.me/jerrygreen-512.png" alt="My photo" height="256" width="256" />
<br/>My photo hint text for a photo
</p>
This gives me what I wanted even on github (and the border is added in my blog):
My photo hint text for a photo
Most helpful comment
Am aware of the why. The difficulty here is that pseudo elements were meant to be just that; pseudo, no real elements.
In my opinion, the issue is not finally geting debated fully over this draft, where it should have been debated at the time "quotes:" was introduced for blockquotes. enummaration of list items existed ahead of the whole issue, but should now also be part of this debate how to proceed.
The point of raising this issue was to show that either we do make speudo elements selectable, or we stay true to the nature of spesudo elements, but also follow through by rethinking the way we apply quotation marks to blockquotes and citations, and the way we apply numerals to list items.
We need to start recognising quotation marks and numerals as actual content. In what manner we should do so, is the debate which needs to take place.