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

In this small tutorial I will guide you how you can achieve the following low highlight effect or beautiful bold under line under your text.

How to Achieve it?

create a paragraph tag and inside it enclose the text you want to high within span tag with the class name you like.

HTML

<p class="hero-title">You can easily <span class="half-highlight-yellow-2">do underline</span> me.</p>

CSS

.half-highlight-yellow-2 {
  background:linear-gradient(180deg, transparent 60%, yellow 60%);
}

check it live on codepen
https://codepen.io/muneebejazio/pen/QWaxeBY