Многострочный фон, имитирующий подчеркнутый текст ⇐ CSS

[Anonymous]

Я создал эффект наведения, который очень хорошо работает с однострочным текстом. К сожалению, это не работает, когда текст многострочный. Я понимаю, что это потому, что к абзацу добавляется фон, содержащий весь текст, но я понятия не имею, как его изменить, чтобы это исправить? Возможно ли это, изменив только класс .underline? Я использую его как отдельный класс и хотел бы, чтобы он работал с разными элементами существующего веб-сайта, и будет ли абзац однострочным или многострочным, зависит от размера экрана, поэтому изменение HTML на самом деле не является ответом. Можете ли вы помочь?

Код: Выделить всё

div {
border-right: black 1px solid;
padding: 2px;
width: 150px;
}

.underline {
cursor: pointer
position: relative;
text-decoration: none;
background: linear-gradient(
to right,
green 0%, /* Green */
green 75%, /* Green */
red 75%, /* Red */
red /* Red */
) no-repeat 0 100%;
background-size: 0 2px;
transition: background-size 400ms;
}

.underline:hover {
background-size: 100% 2px;
}

Код: Выделить всё

This text
This another, multiline text

Подробнее здесь: https://stackoverflow.com/questions/784 ... rline-text