How to adjust padding to hover?

Question

css

Hey everyone, the problem comes up is that there is a shear on the hover effect. I understand that this is a game of that 1px that is set in border , but I can’t figure out how to solve this problem.
Code: https://jsfiddle.net/14zu3je5/
Thanks in advance!

Answer 1

What? What is 1 pixel border? You have padding on hover set to 12 pixels. https://jsfiddle.net/Ltnsep3j/1/

Answer 2

https://jsfiddle.net/14zu3je5/2/

Answer 3

I would also set a link display: blockso that the middle points do not run into each other
https://jsfiddle.net/t1eh1q8w/
And in such cases, it's better to do the initial one borderwith transparency ( transparent). Because if you change the background, then you also have to change the color of the original border-a.

Answer 4

There is no code or example, but I can assume that the element should initially have a border with color transparent