Is it possible to select css generated content?

Question

Let's say I have mark up:

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

..with CSS:

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

This produces the text: Hello world! - FIDDLE

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

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

BUT...

If I try to select / Copy the text - only the 'hello ' part is selectable.

enter image description here

Is there any way to select css generated text?

NB:

1) ~~I have looked at the spec (here and here) regarding generated content and I haven't seen any reference to this issue.~~

The spec here and here seems to say that generated content should be selectable

Generated content should be searchable, selectable, and available to assistive technologies

2) If the answer to this question is 'no - it is not possible' - please link to a credible source which states this.

I don't know exactely. But since the generated content is not part of the DOM, I should say no. — yunzen, Jun 24 '14 at 11:16
Fundamentally not in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=12460 — Alex K., Jun 24 '14 at 11:19
In fat it should **not** be selectable because it is in fact **styling** We misuse the `content` element in using it in this way. If you want actual selectable 'content' the use a proper HTML element not a pseudo element. - https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements — Paulie_D, Jun 24 '14 at 11:53
I most certainly _don't_ think that `
comments
` is an acceptable usage either. CSS shouldn't be used to generate content, but styles. Writing "3" here is not considered a style, but actual content. If you tried to add some fancy quotes or bullt point, then it would be a style. Besides, what benefit does that give you over just including "3 comments" as a text? — kba, Jun 24 '14 at 12:41
@kba what benefit does that give you over just including "3 comments" as a text? Well, you'll need to add and extra span element. So if this is used inside a list - you're adding a span element for each item. — Danield, Jun 24 '14 at 12:49
@Danield Why would you need to add an extra span element? And even if you _had_ to add that span element, that's still better than adding a `data' attribute in my book. — kba, Jun 25 '14 at 01:14
If the data attribute is already set by javascript, why not use javascript to do the rest? Your logic on this method doesn't make any sense to me. — Novocaine, Oct 27 '14 at 09:42
I agree with @Novocaine. Your second example still doesn't seem like a logical use case. If the variable is generated or set in the javascript, there is no need to attach it as an HTML attribute. — CaribouCode, Oct 29 '14 at 00:14
@Novocaine et al. In that project we had a (temporary) constraint that strings were to be created only in the markup and not in js. This is because localization for multiple languages was being used and localization using JavaScript wasn't ready yet. In any case, please note that this is *not* the point of the question nor was the point of the question that this is a perfect use-case for the data attribute. Rather, after using the data attribute in this way - I stumbled over the fact that I couldn't select the generated text. — Danield, Oct 30 '14 at 10:11

score 19 · Answer 1 · edited May 23 '17 at 10:29

19

No, you can't.

See Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery. To repeat what is described there, generated content is not part of the DOM.

In the words of the CSS2.1 spec,

Generated content does not alter the document tree.

Generated content only exists in the visual world of the rendering engine. Selecting is about selecting portions of the DOM. Generated content is not in the DOM, hence cannot be selected. For the same reason, generated counters or list item bullets cannot be selected.

edited May 23 '17 at 10:29

Community

1
1

answered Oct 27 '14 at 07:10

Does the fact that chrome developer tools recently started showing pseudo elements in the markup mean that something has changed, or is this just a chrome feature made for easier debugging? – Danield Oct 29 '14 at 10:34
The latter. It's just a way to select them to examine their styles. – Oct 29 '14 at 10:49
1

Re: "*Selecting is about selecting portions of the DOM*", **why so?** Why not do *real* select? – Pacerier Jul 09 '17 at 06:42

score 9 · Answer 2 · edited Jun 20 '20 at 09:12

Instead of actually selecting the generated content, you could simulate this with some javascript.

I stumbled over this David Walsh blog, where he provides code that fetches generated content.

Using that, you can append the generated content to the regular content to simulate selection of the generated content, then you can set the generated content with display:none so that it doesn't appear twice. Like this:

FIDDLE

String.prototype.unquoted = function() {
  return this.replace(/(^['"])|(['"]$)/g, '')
}

var element = document.getElementById('div1');

var content = window.getComputedStyle(
  element, ':after'
).getPropertyValue('content');

element.innerHTML = element.innerHTML + content.unquoted();

console.log(content.unquoted());

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

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

So why would you ever want to do something like that?

Well, you'd probably never want to do this, but I left a long comment on the question explaining a particular constraint that I once had, where this could have been a solution.

NB: I do realize that this 'solution' doesn't really select the generated content itself, but decided to post this answer in case somebody out there ever needed a workaround.

Why would you ever want to do something like that? Well, a solid use case would be copying Markdown code generated (from HTML) by a CSS template to paste it in a textarea with Markdown support. See https://gist.github.com/ImJasonH/c00cdd7aece6945fb8ea. — John Slegers, May 28 '15 at 19:09
Use case? Color value is stored in a variable in CSS. Value is displayed to the user via generated content (:after). The user should be able to select that value and copy to clipboard. Voila! — Christopher Werby, Jul 13 '20 at 19:48

score 4 · Answer 3 · edited Jun 24 '14 at 12:04

4

Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them

Check These links :

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

edited Jun 24 '14 at 12:04

NoobEditor

15,563
19
81
112

answered Jun 24 '14 at 11:57

Mr7-itsurdeveloper

1,631
2
17
24

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – trejder Oct 27 '14 at 07:01
@trejder a link in the answer does not turn it into a link only answer, even if it's short. – Korem Oct 27 '14 at 07:17
2

With all due respect, the text in this answer is about accessibility, which however useful is not related to, or an answer to, the question. The second link provides general information about data attributes, presumably also for the benefit of the comments at the bottom about accessibility. This information about accessibility belongs in a comment. The first link does address the question, the only part of the answer which does so, but provides no summary of its key points. which could indeed be considered to make it a link-only answer. – Oct 27 '14 at 09:31

Is it possible to select css generated content?

3 Answers3

So why would you ever want to do something like that?

Linked