How to increase the gap between text and underlining in CSS

css underline
maxp picture maxp · Nov 14, 2009 · Viewed 372.9k times · Source

Using CSS, when text has text-decoration:underline applied, is it possible to increase the distance between the text and the underline?

Answer

chelmertz picture chelmertz · Nov 14, 2009

No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a> then just add border-bottom and padding on the <span> - Demo

Related questions

Remove stubborn underline from link

I am attempting to have a link show up in white, without an underline. The text color shows up correctly as white, but the blue underline is stubbornly persisting. I tried text-decoration: none; and text-decoration: none !important; in the CSS …

Read More
CSS Box Shadow Bottom Only

How can I do this? I want my element to look as though it has a shadow underline. I don't want the shadow for the other 3 sides.

Read More
How to remove the underline for anchors(links)?

Is there anyway (in CSS) to avoid the underline for the text and links introduced in the page .. ?

Read More