How to achieve this using CSS? (picture below)
>Solution :
I would recommend that you start by learning the basics of CSS but to answer your question, you should use the ::before and ::after pseudo-element of CSS.
See this example:
.circle-sketch-highlight {
position: relative;
}
.circle-sketch-highlight::before {
content: "";
z-index: -1;
left: -0.5em;
top: -0.1em;
border-width: 2px;
border-style: solid;
border-color: skyblue;
position: absolute;
border-right-color: transparent;
width: 100%;
height: 1em;
transform: rotate(2deg);
opacity: 0.7;
border-radius: 50%;
padding: 0.1em 0.25em;
}
.circle-sketch-highlight::after {
content: "";
z-index: -1;
left: -0.5em;
top: 0.1em;
padding: 0.1em 0.25em;
border-width: 2px;
border-style: solid;
border-color: skyblue;
border-left-color: transparent;
border-top-color: transparent;
position: absolute;
width: 100%;
height: 1em;
transform: rotate(-1deg);
opacity: 0.7;
border-radius: 50%;
}<p>This is <span class="circle-sketch-highlight">Highlight Me</span> example</p>