How can I create custom underline or highlight for text in html or css?

Question

I\'m trying to figure out how to create a custom background effect for text. In other words, how can I make something like this:

Answer 1

A very good article explains a nice way to do that with gradients: https://thirtyeightvisuals.com/blog/low-highlight-heading-links-squarespace

.highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}