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

Question

[Cheizer]

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

Вот пример живой сделал 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;
}

Answer 1

[Виталий Першин]

Добавьте:
box-decoration-break: clone;
-webkit-box-decoration-break: clone;

Comments

[Cheizer]

Так все равно по очереди анимация делается как и в моем примере.

[Виталий Першин]

Роман Кузнецов, Для хрома вендорный префикс -webkit нужно добавить, поправил пример

[Cheizer]

Виталий, БЛАГОДАРЮ!

[Cheizer]

Виталий, а не подскажете, как можно сделать отступ подчеркивания от текста? line-height для текста не работает в данном случае для полосы.

[Виталий Першин]

Роман Кузнецов, Это интересный вопрос в данном контексте. Я не знаю, но подумаю.

[Виталий Першин]

Роман Кузнецов, Странно по помог padding. Обновил ответ

[Cheizer]

Виталий, да благодарю, сделал тоже на paddng

Answer 2

[xversus]

Как вариант - разбить ссылку на несколько (три в вашем случае) ссылки и исправить на:

div:hover a {
  background-size: 100% 1px;
}

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

Comments

[Cheizer]

да, но тут совсем сложно проконтролировать сколько будет переносов, адаптив. И заранее длину ссылки не знаем.