css- length of border bottom

Question

I have a link that\'s styled with

a:hover {
    border-bottom: 3px solid #fff;
}

And looks like this:

But I need to resize the

Answer 1

This is how I would do it:

a:hover:after {
    content: ' ';
    text-decoration: none;
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    margin-left: 25%;
    border-bottom: solid 3px black;
}

Here is the JSFiddle demo