How to increase distance between underline and text?

Hi,
is there any way to increase the distance between text and underline?
And maybe change to a thicker line?

Sandra

Various things are possible, but there is no strict control of that space unless you use a border.

  1. with custom code, set the underline to under
    a { text-underline-position: under; }
    It places the underline under the text with extra space to prevent crossing descenders.

  2. You can craft your own underline with a border-bottom. And you will then be able to control the distance between the text and the line using either line-height but it will also add space above the text) or padding-bottom.
    The problem with using border-bottom directly is that even with padding-bottom: 0, the underline tends to be too far away from the text to look good. So we still don’t have complete control.
    One solution that gives you pixel accuracy is to use the :after pseudo element:

a {
text-decoration: none;
position: relative;
}
a:after {
content: ‘’;

width: 100%;
position: absolute;
left: 0;
bottom: 1px;

border-width: 0 0 1px;
border-style: solid;

}

  1. Use a neat trick with background gradient that’s crafted to make a line:

a {
background-image: linear-gradient(
180deg, rgba(0,0,0,0),
rgba(0,0,0,0) 81%,
#222222 81.1%,
#222222 85%,
rgba(0,0,0,0) 85.1%,
rgba(0,0,0,0)
);
text-decoration: none;
}

2 Likes

Hey, don’t mean to jump in guys, but you can use a text link, increase line height, then add a bottom border. Then add hover state color change. And use transition time for that border to make it slower. I don’t think you need code to increase the distance between the 2.

http://www.screencast.com/t/UmzWehF9

3 Likes

definitely better. thanks

Thanks a lot, it is very helpful. I was looking at how to fix this issue too. Now I see it is simple.

Nice lil hack! Thanks