Is it possible to select css generated content? [duplicate]

Question

This question already has answers here:

How can I make generated content selectable? (2 answers)

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.

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.

Answer 1

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.

Answer 2

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

Answer 3

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.