Text inserted via ::before and ::after cannot be selected and not copied.

How can I change this?

span::before {
  content: "including this text";
}

<p>
  If the text of this paragraph is selected and copied then all of it should be copied
  <span>instead of only this part</span>.
</p>

Using JavaScript instead of CSS is not acceptable. But the following JavaScript would be a acceptable:

1. a function taking an element and returning the ::before text.
2. a function taking an element and sitting its :: before text to display:none.

CodePudding user response：

a function taking an element and returning the ::before text.

function getPseudoElementContent(selector){
     return window.getComputedStyle(
         selector, ':after'
  );
 }

a function taking an element and sitting its :: before text to display:none enter code here

 function setPseudoElementContent(selector){
   selector.classList.add("customBefore")
 }
  // And add in your style 
  .customBefore::before{
      content:"" !important;
  }