1

Почему сдвигается стрелка, когда я навожу мышь на надпись Вернуться назад? У меня же задано правило, что при наведении на блок увеличивается только размер шрифта у span.

PS Чтобы перейти в данный раздел, надо нажать Интернет-магазин и потом Узнать подробнее

Весь код jsfiddle.net/1ohrf34p/

Сам сайт cn76553.tmweb.ru

введите сюда описание изображения

.back span,
.next span {
    transition: 0.3s !important;
}


.back:hover span,
.next:hover span {
    border-bottom: 1px solid #fff;
    font-size: 22px;
}
<div class="footer-block">
                                    <a href="#" class="back">
                                        <div class="button-back"></div>
                                        <span>Вернуться назад</span>
                                    </a>
                                    <a href="#" class="next">
                                        <span>Примеры работ</span>
                                        <div class="button-next"></div>
                                    </a>
 </div>

1 ответ 1

1

Потому что Вы меняете размер текста, при этом не задав высоту родительского блока. Размер шрифта высоту этого родительского блока при таком условии и будет менять. Элементы выстраиваются по flex центрально по вертикали, следовательно стрелочка изменяет положение при наведении.

Добавляете высоту, и всё работает как надо:

.back, .next {
    height: 23px;
}

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