You can create a dynamic highlight effect for live text using some special CSS tricks.
In order to replicate the example above. We start out with each individual word being separated into its own span tag. This way we can add the highlight effect to each word, causing dynamic design for our effect.
So far we should have each word plainly displayed as live text:
Now we’re going to use the :after selector. This selector ‘creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property’. For our intents and purposes, the content for our pseudo-element will be a blank string. Then we have to give it a height; for the typeface that I’m working with (Roboto Mono), 30% seemed suiting to me.
Using the position property, we can make the highlight’s position relative to the parent element. In our case, the :after element is a child element of each word span. Then we want to nudge it in the correct position with top, left, and having a negative relative value for margin-left.
And finally, we want to make sure the bar is behind the word, so let’s give it a negative z-index value.
You can get as creative as you want with this by changing up color and sizing!
Sources:
