Хвилясте підкреслення зазвичай застосовується для виділення тексту з орфографічними або іншими помилками.
Саме підкреслення робиться через властивість text-decoration зі значенням underline, а ось стиль і колір лінії задаються через властивості text-decoration-style і text-decoration-color. Таким чином, для нашого завдання знадобиться три різні властивості.
text-decoration: underline; /* Підкреслення */ text-decoration-style: wavy; /* Хвиляста лінія */ text-decoration-color: red; /* Колір підкреслення */
У прикладі 1 показано створення класу mistake, який додається до окремих слів пропозиції та створює для них підкреслення бажаного вигляду.
Приклад 1. Хвилясте підкреслення
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Підкреслення</title> <style> .mistake {text-decoration: underline; text-decoration-style: wavy; text-decoration-color: red; }
</style>
</head>
<body> <p>Наречений за нареченою <span class="mistake">доглядав</span>, мережива їй урочисто пригладжував.</p>
</body>
</html>