Как сделать волнистое подчеркивание текста CSS

Чтобы выделить фрагмент текста, подчеркнув его волнистой линией, например, для указания орфографических или других ошибок, можно применить свойство text-decoration со значением underline. Стиль и цвет линии задаются через свойства text-decoration-style со значением wavy и text-decoration-color. Можно добавить тег span, задать ему класс с необходимыми свойствами, как на примере.

Пример

Lorem Ipsum

HTML


<p>Lorem <span class="text-wavy">Ipsum</span></p>

CSS


.text-wavy{
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #ff6247;
}