The text-underline-offset CSS property

Today we will learn about the text-underline-offset property. It sets the offset distance of an underline for the text-decoration-line property or text-decoration property. The text-underline-offset property can help to adjust the distance of an underline, fix broken underline, and use underline as line-through and overline.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: solid 3px #ff63fa;
    padding: 30px;
    font-size: 3em;
    background-color: greenyellow;
    text-decoration: underline;
    text-underline-offset: -20px;
    text-decoration-skip-ink: none;
}

</style>
</head>
<body>

<p>1. Have a nice day! May God bless you.</p>

</body>
</html>