CSS decrease space between text and border
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/
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)
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.