CSS decrease space between text and border

Question

When hovering a link I want it to get an underline. The underline should be 2px strong and 4px below the text.

With

text-decoration: underline

I get a 1px strong line which is 4px below. (Distances vary by font)

If I write

border-bottom: 2px solid #000;

I get a 2px line which is about 10px below the text.

How can I decrease the distance between the text and the border?

padding-bottom: -6px

does not work. Any negative value with padding-bottom does not work.

Or how can i get the underline to be 2px strong?

http://jsfiddle.net/qJE2w/1/

Update 2022: For everyone coming here years after this question was asked:

It's now possible to change the underline via CSS. There are "new" properties like text-underline-offset and text-decoration-thickness.

Answer 1

One quick solution that comes into my mind is to apply the border on a pseudo-element:

.border{
    position: relative;
}

.border:hover::after{
    content:'';
    position:absolute;
    width: 100%;
    height: 0;    
    left:0;
    bottom: 4px;                    /* <- distance */
    border-bottom: 2px solid #000;  
}

(example)

Answer 2

You can use line-height for decrease distance.

.underline {
  display: inline-block;
  line-height: 0.9; // the distance
  border-bottom: 1px solid;
}

Drawback of this method -- because we use block display it works only for single line of the text.

Answer 3

You can use background with linear-gradient to produce a border, and with it you can position it anywhere.

For example:

background-image: linear-gradient(currentColor, currentColor);
background-position: 0 95%; /* determines how far from bottom */
background-repeat: no-repeat;
background-size: 100% 5px; /* second value determines height of border */

http://jsfiddle.net/1mg4tkwx/

Credit: https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/

Answer 4

Multi line solution

Explanation. I'm creating a sibling which has the same text and text style and is shifted to top a bit. If you want to keep your code clean you can insert the sibling using JS on a page load event.

Restrictions. This solution doesn't work inside paragraph of text.

.underlined_link {
  text-decoration: none;
  display: inline;
}
.underlined_link h2,
.underlined_link div {
  display: inline;
  font-size: 20px;
  margin: 0;
  line-height: 35px;
  font-weight: normal;
  padding: 0;
}
.underlined_link h2 {
  color: transparent;
  border-bottom: 1px solid red;
}
.underlined_link div {
  position: absolute;
  top: 10px;
  left: 8px;
}

<a class="underlined_link" href="#">
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.</h2>
  <div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.</span></div>
</a>

Answer 5

This Line works for me:

.main-nav ul li {
    padding: 0 10px;
}
.main-nav .main-menu  li a {
    border-right: 2px solid #262626; 
    padding: 7px;
}

Answer 6

A cool solution I found was applying the border using outline and then using a negative value in the outline-offset property.

.outline-border {
  outline: 2px solid red;
  outline-offset: -2px; 
}

Answer 7

display: inline-block;
line-height: 1;

For some reason, line-height doesn't apply when it's in a span with its default inline display. It must be displayed as a block or inline-block. Setting the line-height to 1 gets rid of the gap between the border and the text. From here, you can set the padding to control how much of a gap there is on each side between the text edge and its corresponding border.