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