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

Use the <mark> element and tweek the line-height

mark {
  display: inline-block;
  line-height: 0em;
  padding-bottom: 0.5em;
}

<h1><mark>Lorem ipsum</mark></h1>