How to avoid element shift on border change while hovering in CSS?

I am talking about this kind of element shift while hovering on element.

That happens when we try to inject border on hover. For e.g. in the code below, I have right border but not the left one and on hover, I am adding the left border which creates element push to make a room for that border.

This should be avoided as it will push all elements which are in relative position to the element we are injecting the border.

There are few different ways we can avoid this kind of situation.

Here is one way to avoid it.

Just add the transparent border-left initially and add the color of the border using border-left-color property. That way it won’t require element shift on hover as the room is already allocated.

At the end we will see NO shift on hover. Like this:

Share this post