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