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;
}