Outline border bottom only

Question

I'd like to create a bottom outline border when the cursor is over an image and I don't know how to do this. I'd like to use this kind of inner border because I don't want to have layout problems with a traditional border-bottom.

Here's my current code,with outline margins everywhere:

.img-lightbox-small{
width:110px;
height:110px;
margin: 1px;}

a img.img-lightbox-small:hover{
opacity:1;
outline: 3px solid #4bb6f5;
outline-offset: -3px;
}

Answer 1

To get around the problem you can use border-bottom, with it set margin-bottom: -1px (the size of the border). This will stop it from moving the content below.

HTML:

<div></div>
test

CSS:

div {
    width: 100px;
    height: 100px;
    background: #eee;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;
    margin-bottom: -1px;
}

DEMO HERE