JSFiddle - React, Tailwind, and code Playground

HTML

<p>rofl im helicopted</p>

CSS

span{color:red}
a{color:red}
span:before{
    width:100px;
    height:20px;
    position:absolute;
    content: " som before ";
        background-color:silver;
    margin-top:30px
    
    
}

JavaScript

function doit()
{var x=window.getSelection();
 var renge=x.getRangeAt(0);
  var g=document.createElement("span");
 renge.surroundContents(g);


}

window.onmouseup=doit;