Почему родительский блок меняет свой размер с :hover?

185

01 декабря 2021, 08:50

у меня присутствует ховер, который добавляет линию подчеркивания под объектом. ]2

Как видите, родительский блок меняет свою высоту, при наведении. CSS

.topnav li:hover:after{
content: "";
display: block;
width: 102%;
position: relative;
top:30px;
border-bottom: 4px solid #ba0000;}

Я пытался создать подобный эффект и без :after, но не помогло, блок всё так же растягивается, как этого избежать?

Answer 1

Очевидно, что родительский блок увеличивает свою высоту на 4px, которые добавляются при появлении нижней границы у :after.

Есть несколько способов решить проблему. Самый простой: изначально сделать у :after прозрачную границу в 4px, а по ховеру только добавлять цвет.

Также можно для li задать position: relative, а для :after - absolute. Тогда псевдоэлемент выпадет из потока, и появление границы не повлияет на высоту родительского блока.