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
Top comments (0)