如何为 html 或 css 中的文本创建自定义下划线或突出显示？

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:

Use the 元素 https://developer.mozilla.org/en/docs/Web/HTML/Element/mark并调整行高

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

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