Change text css „underline“ to individual style

Hi, I’m trying to change the general „underline“ to scribble-effect, same for „mark“ (but here I use a circle effect):

This is what I use for underline:
.underline-sketch-highlight{
position:relative;
}

.underline-sketch-highlight:before{
content:””;
z-index:-1;
left:-0.5em;
top:0.75em;
padding:0.1em;
border-width:3px;
border-style:solid;
Border-color:blue;
border-left-color:transparent;
border-top-color:transparent;
position:absolute;
width:104%;
height:0em;
transform:rotate(-1.5deg);
opacity:0.7;
border-radius:75%;
}
.underline-sketch-highlight:after{
content:””;
z-index:-1;
left:-0.5em;
top:0.8em;
padding:0.1em;
border-width:3px;
border-style:solid;
Border-color:blue;
border-left-color:transparent;
border-top-color:transparent;
position:absolute;
width:104%;
height:0em;
transform:rotate(1.5deg);
opacity:0.4;
border-radius:25%;
}

How can I change without the need to use <span> for every single underlined or marked word.

Thank you in advance!