Search code examples
htmlcssdom

Select text in ::before or ::after pseudo-element

Look this very simple code

<!DOCTYPE html>
<html>
<head>
<style>
p::before {
    content: "Before - ";
}
</style>
</head>
<body>
<p>Hello</p>
<p>Bye</p>   
</body>
</html>

Css adds ¨Before -" at the start of every <P> and renders like this

enter image description here

If you use your mouse to select the text (for copy paste) you can select the original text, but not the Before or Aftter text added by css.

enter image description here

I have a very specific requirement where I need to allow users to select with the mosue the Before text. How would you do it?

Solution

  • You can't, the before and after pseudo classes are not meant to be used for that purpose.