How can I make generated content selectable?

Question

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?

Answer 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.

Answer 2

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