CSS text-decoration-line Property
Last Updated :
17 Apr, 2024
The text-decoration-line property is used to sets various kinds of text-decoration. The text-decoration may include many values such as underline, overline, line-through, etc. It can be possible to combine more than one text-decoration property. For instance, underline and overline values can be used to display lines both under and over the text.
Syntax:
text-decoration-line: none| underline| overline| line-through| initial| inherit;
The text-decoration property is a shorthand property for text-decoration-line(required), text-decoration-color, and text-decoration-style.
Property Values: All the properties are described well with the example below.
none: It is the default value and used to specify no line for the text to decorate the text.
Syntax:
text-decoration-line: none;
Example:Â This example demonstrates the use of text-decoration-line Property whose value is set as none.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-decoration-line property</title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: none;
}
.gfg {
text-decoration-line: none;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line: none;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
underline: It is used to display a line below or under a text.
Syntax:Â
text-decoration-line: underline;
Example: This example demonstrates the use of text-decoration-line Property whose value is set to underline.
HTML
<!DOCTYPE html>
<html>
<head>
<title> text-decoration-line property </title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: underline;
}
.gfg {
text-decoration-line: underline;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line:underline;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
overline: It is used to display a line over the text.
Syntax:
text-decoration-line: overline;
Example:Â This example demonstrates the use of text-decoration-line Property whose value is set to overline.
HTML
<!DOCTYPE html>
<html>
<head>
<title> text-decoration-line property </title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: overline;
}
.gfg {
text-decoration-line: overline;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line:overline;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
line-through: It is used to display a line through a text.
Syntax:
text-decoration-line: line through;
Example: This example demonstrates the use of text-decoration-line Property whose value is set to line-through.
HTML
<!DOCTYPE html>
<html>
<head>
<title> text-decoration-line property </title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: line-through;
}
.gfg {
text-decoration-line: line-through;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line:line-through;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
initial: It is used to set an element’s CSS property to its default value. It is the same as none property.
Syntax:
text-decoration-line: initial;
Example:Â This example demonstrates the use of text-decoration-line Property whose value is set to initial.
HTML
<!DOCTYPE html>
<html>
<head>
<title> text-decoration-line property </title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: initial;
}
.gfg {
text-decoration-line: initial;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line:initial;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
Supported Browsers: The browser supported by the text-decoration-line property are listed below:Â
- Google Chrome 57.0
- Microsoft Edge 79.0
- Firefox 36.0
- Apple Safari 12.1Â
- Opera 44.0
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...