space between text and underline

Question

i am using text-decoration:underline; but text and underline are touching each other.can i increase space between text and underline?

this one. i want to make space between text and underline.

score 64 · Accepted Answer · answered Jun 21 '10 at 14:19

64

Either use a different font or use a border-bottom instead so that you can control the space with padding-bottom.

answered Jun 21 '10 at 14:19

BalusC

Instructions how to do this on http://stackoverflow.com/questions/1734618/css-underline-possible-to-increase-gap. – calebds Dec 17 '11 at 08:06
10

If you have trouble with your border-bottom expanding beyond the width of the text, add `display: inline-block` – Dylan Valade Mar 29 '13 at 00:44
Also related - http://stackoverflow.com/questions/1734618/css-underline-possible-to-increase-gap – Mike Gifford Jun 26 '13 at 11:43
4

Doesn't work for multi-line links :( – Dmytro Shevchenko Jan 12 '14 at 19:58
2

Underlining multi-line links sounds awful anyway... – Hayden Crocker Jan 20 '14 at 16:22
1

The distance is determined by a font used. Try web-safe fonts. – Alexei Danchenkov Sep 12 '14 at 04:24

score 26 · Answer 2 · answered Feb 19 '14 at 02:15

26

I had same issue then i used :

.underline_text {
      border-bottom: solid 2px #000000;
      display: inline;
      padding-bottom: 3px;
}

answered Feb 19 '14 at 02:15

Mandeep Gill

2 Answers2