Custom Text Highlighting with CSS
Some websites do different things to highlight specific text phrases. This could be text that the user should pay attention at (like a warning), or is just very important (like an item price). I was curious on how to do that.
The solution is very simple: via CSS, background image and inline span. First, you need to create the image that you want to put as a highlight behind your text. I just used Gimp and a brush tool until I was okay with the result. The image has to be exported as a scalable vector graphic (svg).
After the image is created, you could either keep it as a file or convert it to a base64 string to be used within css. Important is, that the background-image resizes by covering the element, does not repeat and is centered.
With some additional padding you can adjust the free space of the image a bit.
Originally published at https://mariusreimer.com on April 26, 2020.
