Creating Design with css and editing pages

Hi GenerateSupport team,

I’m trying to get better with CSS so I can create small design touches on my site, like custom highlights or shapes around text. For example, I’ve been working with a class that creates a hand drawn circle effect around words using CSS as below:

/*Hand Drawn Circle */
.hand-drawn-circle {
position: relative;
display: inline-block;
padding: 0 10px; /* Adds space inside the circle */
margin: 0 5px; /* Adds space outside to keep it off other words */
}

.hand-drawn-circle::after {
content: ”;
position: absolute;
top: -5px;
left: -2px;
right: -2px;
bottom: -2px;
border: 3px solid #0198de;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Creates the oval shape */
pointer-events: none; /* Makes sure you can still click text if needed */
}

What I’m a bit stuck on is how to actually apply this properly in the editor. From what I understand, I need to switch from the Visual Editor to the Code Editor, then manually find the text and wrap it with the class. But honestly, it’s pretty tricky to locate the exact words in the code view, especially on longer pages.Please see attached

Perhaps I’ve missed something, but is this the correct approach, or is there an easier way to apply a custom CSS class to specific text? Maybe there’s a way to do this directly in the Visual Editor?

Would really appreciate your professional guidance here.

Thanks a lot,
Andy