Which property is used to underline, overline, and strikethrough text using CSS ?
Last Updated :
20 Jun, 2022
In this article, we will see the property that can be used to underline, overline, and strikethrough the text.
text-decoration: The text-decoration property is used to add decoration to the text. This styling property is used to add decorations like underline, overline, and strikethrough. This property is also used as a shorthand property for the below list of text decorators.
Syntax:
text-decoration: text-decoration-line | text-decoration-style
| text-decoration-color | text-decoration-thickness | initial | inherit;
Property Values:
The text-decoration property has a different property value to decorate the text, i.e. underline, overline & line-through.
Example: This example describes the use of the text-decoration property to implement underline, overline, and strikethrough to the text.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
text-decoration Property
</title>
<style>
h2 {
text-decoration: underline;
}
b {
text-decoration: overline;
}
p {
text-decoration: line-through;
}
</style>
</head>
<body>
<center>
<h2>Welcome To GeeksforGeeks</h2>
<b> Text-decoration Property </b>
<p>
underline, overline, and strikethrough
is applied to the text.
</p>
</center>
</body>
</html>
|
Output:
Example 2: This example describes the Text-decoration Property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-decoration Property</title>
<style>
h1 {
color: green;
}
ul li {
margin-top: 15px;
}
#example1 {
text-decoration: underline wavy green;
}
#example2 {
text-decoration: line-through red;
}
#example3 {
text-decoration: overline blue;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>text-decoration Property</h2>
<ul>
<li id="example1">
underline wavy green
</li>
<li id="example2">
line-through red
</li>
<li id="example3">
overline blue
</li>
</ul>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...