How to get the border-bottom closer to the text?

Question

I want to use a border-bottom line for links (not text-decoration underline). But I need to get the line closer to the text. Negative padding isn\'t possib

Answer 1

If you set the links to display:inline-block;, you will be able to set a smaller line-height (smaller than 1) and move the bottom border closer to the text :

a {
  color: #245fc1;
  display: inline-block;
  line-height: 0.7em;
  position: relative;
  border-bottom: 1px solid #245fc1;
  padding-bottom: 0px;
  text-decoration: none;
}

<a href="#">I want the underline to be closer</a> to the text<br/>because if I write in second line the bottom line from above is too close. <br/>using text-decoration: underline is not an option for me!

Answer 2

Try this {demo}

a{
    color: #245fc1;
    position: relative;
    border-bottom: 1px solid #245fc1;
    text-decoration: none;
    line-height:0px;
    height:7px;
    display:inline-block;
}

Answer 3

A different approach is to use the pseudo-element ::after to give your border a different height.

Here is your example: http://jsfiddle.net/2JSY4/7/

Your new CSS:

a{
    color: #245fc1;
    position: relative;
    padding-bottom: 0px;
    text-decoration: none;
}

a::after{
    content:'';
    position:absolute;
    width: 100%;
    height: 0;    
    left:0;
    bottom: 1px;                   
    border-bottom: 2px solid #000;  
}

Answer 4

Here is another solution using linear-gradient where you can easily adjust the distance, size, color, etc:

a {
  color: #245fc1;
  display: inline-block;
  line-height: 0.7em;
  position: relative;
  background-image:linear-gradient(#245fc1,#245fc1);
  background-position:0 100%; /*adjust the position to make it closer*/
  background-size:100% 1px; /*adjust the size of the line*/
  background-repeat:no-repeat;
  padding-bottom: 1px;
  text-decoration: none;
}

<a href="#">I want the underline to be closer</a> to the text<br>because if I write in second line the bottom line from above is too close. <br>using text-decoration: underline is not an option for me!