Как на CSS сделать анимацию подчеркивания ссылки на две строки?

Есть ссылка, для нее сделана анимация подчеркивания при наведении. Все хорошо когда ссылка в одну строку, НО когда она в две строки, анимация подчеркивания при наведении, работает НЕ ОДНОВРЕМЕННО. Как сделать что бы подчеркивание, появлялось ОДНОВРЕМЕННО для каждой строки одной ссылки?

Вот пример живой сделал https://codepen.io/Cheizer/pen/bGGgqJE

Вот css как делаю:
a {
    color: blue;
    text-decoration: none;
    
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s;
}

a:hover, a:focus {
    background-size: 100% 1px;
}
  • Вопрос задан
  • 213 просмотров
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
Добавьте:
box-decoration-break: clone;
-webkit-box-decoration-break: clone;


Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@xversus
Как вариант - разбить ссылку на несколько (три в вашем случае) ссылки и исправить на:
div:hover a {
  background-size: 100% 1px;
}


Или через js.
Только зачем вам такой геморрой? Выглядит и без того нормально, а так - при любом решении будут проблемы, потому что содержимое и длину ссылок и где они отображаются, вы можете не знать заранее.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
НТЦ РОСТ Москва
от 150 000 до 250 000 руб.
от 90 000 до 130 000 руб.
от 100 000 до 130 000 руб.
21 нояб. 2019, в 19:02
150000 руб./за проект
21 нояб. 2019, в 19:00
150000 руб./за проект
21 нояб. 2019, в 18:51
500000 руб./за проект