DEV Community

Cover image for How to increase the gap between text and underlining in CSS
Uchechukwu Obasi
Uchechukwu Obasi

Posted on

How to increase the gap between text and underlining in CSS

Most frontend engineers just like me might have encountered this same problem where creating a gap between text and underline is a huge pain.

In this short article, I will share an effective CSS trick that can make this happen with no stress.

First, you create a div around that particular element you wish to place an underline.

Alt Text

After that, you proceed to style that particular div by giving it a padding and border-bottom value of your choice.

Alt Text

If you preview the output at this point, you will notice that the width of the underline spans across the width of it's parent container of which you wouldn't want that to happen. How do we make the underline the same width with the content? Boom! The Max-content value of the width property! Works like magic!

Alt Text

Although the CSS Working Group has published a draft for text decoration level 4 which would add a new property text-underline-offset (as well as text-decoration-thickness) to allow control over the exact placement of an underline.

As of this writing, it's an early-stage draft and has not been implemented by any browser. However, this trick is widely supported across all major browsers and also works perfectly with multiple text as well.

I hope you find this article helpful.

Top comments (1)

itsjzt profile image
Saurabh Sharma

I used to add border-bottom inline elements