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.