Increase border width on hover without moving other content
In this post, I describe how to increase the border thickness when you hover over an element without causing other elements on the page to move around. Cause If you add or increase the border width (top or bottom) of an element, it will increase the height of that element, which can cause other things on the page to move down. Resolution Element does not have a border If your element doesn't already have a border, you can add a transparent border, then change this to a coloured border on hover, for example: .item { border : 1px solid transparent ; } .item:hover { border-color : red ; } Element has a border There are three ways to add a thicker border on hover if the element already has a border: 1. Reserve space in the element and expand the thicker border into that space. For example, if you have an a element sized using line-height, you can set the min-height to a slightly bigger value to cater for the thicker border on hover: .item { line-h...