Смещение border при :hover?

Question

[weksik]

Делаю верстку сайта по макету. В хэдере hover работает так как нужно, но во второй секции при выделении hover border bottom съезжает вниз, не могу понять в чем дело. Прошу помочь пока я крышей не поехал.
вот ссылка на код https://codepen.io/weksik/pen/oNvyxgz

Answer 1

[Рома Зварич]

Изначально у ссылок нет нижней рамки.
При наведении она появляется, блок увеличивается и смещает всё содержимое.

Добавьте нижнюю рамку (прозрачную) изначально для ссылок.
А при наведении просто окрашивайте её в нужный цвет.

Пример:
https://codepen.io/hisbvdis/pen/RwbJaaL

Comments

[weksik]

Почему в хэдере не пришлось применять такой костыль?

[weksik]

и требуется чтобы hover был наровне с border всей секции.

[weksik]

я думал об этом, но не могу понять, хэдер работает, а вторая секция уже распадается такой проблемой.
выложил на хостинг с картинками https://portyamaha.000webhostapp.com/

[Рома Зварич]

weksik,

такой костыль?

Это не костыль, а стандартная практика.

Почему в хэдере не пришлось применять такой костыль?

В хедере Вам просто повезло не столкнуться с этой проблемой. Как Вы можете увидеть, изначально высота хедера определяется его самым высоким элементом с классом .headerLogo и составляет 100px

скриншот

Вы задали ссылкам в хедере свойства padding, сделав их высоту = 94px

скриншот

При наведении на ссылку, к ней добавляется нижний border, увеличивая её до 97px. Но это никак не влияет на высоту хедера, так как остаётся запас. Ведь высота хедера = 100px

скриншот

[weksik]

Рома Зварич, я понял, спасибо большое!

[Рома Зварич]

weksik, если ответ помог, можете пометить его решением

[weksik]

Рома Зварич, последний вопрос. Как пометить ответ решением? :DDD

[Рома Зварич]

weksik,

[weksik]

Рома Зварич, done! Спасибо большое!