DEV Community

muneebejazz
muneebejazz

Posted on

4 2

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.

Image description

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>
Enter fullscreen mode Exit fullscreen mode

CSS

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

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️