Here's a nice little yellow marker / highlight / glow effect that you can use to make text stand out on the page. It's achieved by layering text shadows on top of each other.
:root {
--highlight: rgba(255, 193, 7, 0.5);
}
strong {
font-weight: 500;
text-shadow:
-0.5em 0 1em var(--highlight),
0.5em 0 1em var(--highlight),
1em 0 1em var(--highlight),
-1em 0 1em var(--highlight);
}
You can tweak the shadows to make the effect more similar to a yellow marker by decreasing the blur radius (the third value in all the shadows) and increasing the opacity of the color.
As a small side note, I've chosen to use the strong element for how I use this effect on my blog. I feel this is the most semantically correct HTML element to use since my intention is to indicate that a portion of the text is more important than the rest of it.
I've noticed that it's quite common to use the mark element for this sort of thing as well. However, I'm not sure that it's the most semantically correct HTML element to use in this case. The HTML specification says that "when used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity". There's no relevance to what the user is doing in this case, which is why I prefer the strong element instead.
If you are marking something up that has to do with the user's activity, it would be totally fine to use the mark element though. One common use case of that is when the user is doing a search and you want to highlight the text the user searched for within the result text.