Mieszko

There are several ways to styling the link underline hover effect in CSS. I describe two solutions and some issues associated with them.

Start by disabling font rendered underlines.

a {
    text-decoration: none;
}

The next and final step is to draw a line for a:hover.

1. Use a::after

Links that span multiple lines only have an underline under the last line of link text.

a {
    position:relative;
    text-decoration:none;
}

a:hover::after {
    display:inline;
    content:" ";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background:blue;
}

2. Use border-bottom

With display:block or display:inline-block the bottom border takes up space and displaces other elements, and the border does not appear under every line of text. Set display:inline to fix both of these problems.

a:hover {
    color:red;
    display:inline;
    border-bottom:solid 2px red;
}

When line-height is so tall that there are gaps between multiple lines of text, this affects user experience. Fix this by wrapping link text in span elements and setting a{display:inline-block;}.