How to solve the problem with the border property on hover?

Question

css

When hovering over the extras in the nav bar (from bootstrap), I made the property that the block has a bottom frame, but it increases the size of the entire block, which is wrong, how to solve this problem without setting a fixed block height?
The box-sizing:border-box property does not work, I asked too much, it did not help

Answer 1

Either set all the usual dice: , and change transparent to the color on hover, or simply add a strip from below through :before,:after. border-bottom: 1px solid transparent;

Answer 2

It is done simply and in different ways: examples
Do not forget about prefixes.