CSS text-decoration-line Property
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
Please Login to comment...