With the introduction of the following text-decoration properties, we can now style text in more ways than before. text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset and text-underline-position need to be specified explicitly.
Syntax
The syntax of CSS text-decoration is as follows −
Selector {
text-decoration: /*value*/
}Example
The following examples illustrate CSS text-decoration property.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
text-decoration-style: double;
text-decoration-skip-ink: auto;
}
p {
padding: 2%;
text-decoration-line: underline overline;
text-decoration-style: wavy;
}
p:nth-of-type(even) {
text-decoration: overline;
}
span {
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
<p>Random Demo Text</p>
<p>Random <span>Demo</span> Text</p>
</body>
</html>This gives the following output
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 3%;
font-size: x-large;
text-decoration-line: underline overline;
text-decoration-style: dotted;
text-decoration-skip-ink: none;
text-decoration-thickness: 4px;
}
</style>
</head>
<body>
<p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>This gives the following output
