Outline border bottom only [duplicate]

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