How do I reduce the distance between the border-bottom and parts of text?

Question

I'm currently building my website and I've run into a problem. Here is the webpage.

I want to add 3px underlines to only the links, like this:

The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.

They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?

Answer 1

Now used to this code (This is demo)

Css

.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    border-bottom:solid 1px red;

}

Demo LInk

Answer 2

Answer 1: Accept that css has limitations and work round them.

Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.

Answer 3

Try adding the following:

display: inline-block;
height: 1.2em;

Haven't tested extensively, but seems to close the gap nicely in modern browsers.

Answer 4

did you try this?

   a {
    border bottom: 3px red;
    }