محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
        <style> 
.solid {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: blue;
}

.double {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-color: blue;
}

.dotted {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: gray;
}

.dashed {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: gray;
}

.wavy {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}
        </style>
	</head>
	<body>
        <h1>CSS text-decoration-style</h1>
        <p class="solid">solid line under the text.</p>
        <p class="double">double line under the text.</p>
        <p class="dotted">dotted line under the text.</p>
        <p class="dashed">dashed line under the text.</p>
        <p class="wavy">wavy line under the text.</p>
	</body>
</html>