Как на 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;
}
  • Вопрос задан
  • 218 просмотров
Решения вопроса 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.
Только зачем вам такой геморрой? Выглядит и без того нормально, а так - при любом решении будут проблемы, потому что содержимое и длину ссылок и где они отображаются, вы можете не знать заранее.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы