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

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.

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.

Cormier

I don't know exactely. But since the generated content is not part of the DOM, I should say no. – Meisel

Fundamentally not in FF: bugzilla.mozilla.org/show_bug.cgi?id=12460 – Expediency

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. - developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements – Cairistiona

I most certainly don't think that <div data-commentcount="3"> comments </div> 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? – Kep

@Kep 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. – Cormier

@Cormier 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. – Kep

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. – Zakarias

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. – Affer

@Zakarias 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. – Cormier

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.

Rota

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? – Cormier

The latter. It's just a way to select them to examine their styles. – Rota

Re: "Selecting is about selecting portions of the DOM", why so? Why not do real select? – Wreckful

Answer 2

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.

Cormier

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 gist.github.com/ImJasonH/c00cdd7aece6945fb8ea. – Whose

This is a great answer. – Carbohydrate

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! – Atcliffe

Answer 3

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

Prospect

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. – Acanthoid

@Acanthoid a link in the answer does not turn it into a link only answer, even if it's short. – Barbitone

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. – Rota