Подчеркивание текста изображением или градиентом, с переносом строк и анимацией при наведение?

Question

Хотелось бы иметь возможность 1 решения для всех случаев подчеркивания текста (сложного картинкой или градиентом, с переносом строк и анимацией при наведение). На данный момент я использую 3 решения (как сократить?):

1. Если нужно подчеркивание каждой строки, с переносе текста и анимацией при наведение:

text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-skip-ink: none;
text-underline-offset: X;
text-decoration-thickness: X;

Проблемы:

Отсутствует возможность сложного подчеркивания изображением или градиентом.

2. Если нужно сложное подчеркивание изображением или градиентом:

Через background-image, пример: https://codepen.io/cassie-codes/pen/rNNGdmw

Проблемы:

Отсутствует возможность анимации у background-image.

3. Если нужно сложное подчеркивание изображением или градиентом, с анимацией:

Через псевдо-элементы, пример: https://codepen.io/iam_aspencer/pen/qvNPBv

Проблемы:

Отсутствует возможность переноса подчеркивания с переносом текста ну другие строки.

Answer 1

Анимация градиента (взято с h.t.t.p.s://dev.to/afif/we-can-finally-animate-css-gradient-kdk и адапитровано для вашего случая):

@property --c {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

@property --e {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

.box {
  cursor: pointer;
  width: 250px;
  height: 200px;
  margin: 15px;
  display: inline-block;
  transition: --c 1s, --e 1s;
  background: linear-gradient(var(--c), var(--e));
}

.box:hover {
  --c: green;
  --e: gold;
}

body {
  text-align: center;
}

<div class="box"></div>

БЛОГ НА HUSL

Подчеркивание текста изображением или градиентом, с переносом строк и анимацией при наведение?

Ответы (1 шт):