Adding a bottom border on hover, CSS only

Question

How can I make a line appear only on the bottom of a linked image when hovered?

I can get an inner border to display on hover, but I only want border-bottom to display.

Here is what I have so far, even though it is with the outline property instead of border:

#links a img, #links a{ border: none; float: left; }
#links a{ margin: 3px; }
#links a:hover{ outline: 3px solid black; }

Not hovered:

Hovered:

Answer 1

One option to get the same result without affecting the size of your link (borders append to the outside of the element) is to use an inset box-shadow.

Which in your example would be to change your a:hover to the following:

#links a:hover { 
    box-shadow: inset 0 -10px 0 0 cyan; 
}

You can see the fiddle here: https://jsfiddle.net/kLLxkdw4/