How can I make generated content selectable?

问题

I can have CSS display the ID for an element by using generated content, like this:

<style>
h2:hover:after {
  color: grey;
  content: \"#\" attr(id);
  float: right;
  font-size: smaller;
  font-weight: normal;
}
</style>
<h2 id=\"my-id\">My ID</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et.</p>

How can I make that generated content (\"#my-id\") selectable so that the user can highlight and copy it?

回答1:

You can't make a pseudo-element selectable, as it doesn't exist in the DOM.

5.10 Pseudo-elements and pseudo-classes

Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.

回答2:

Pseudo elements are not present in the DOM. So you cannot select them.

来源：https://stackoverflow.com/questions/19914349/how-can-i-make-generated-content-selectable