HTMLやCSSでテキストやカスタムアンダーラインの下でどのように低ハイライトを作成できますか?

この小さなチュートリアルでは、あなたのテキストの下に次の低ハイライト効果や美しい太字の行を達成する方法をご案内いたします.

どのようにそれを達成するには？

段落タグを作成し、その中にあなたが好きなクラス名でスパンタグ内で高いテキストを囲みます.

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%);
}

チェックイットライブ
https://codepen.io/muneebejazio/pen/QWaxeBY