0

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

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

.topnav li:hover:after{
content: "";
display: block;

width: 102%;
position: relative;
top:30px;

border-bottom: 4px solid #ba0000;}

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

1 ответ 1

3

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

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.