CSS text-decoration Property
The text-decoration property is used to “decorate” the content of the text. It is essentially decorating the text with different kinds of lines. It is a shorthand property for text-decoration-line(required), text-decoration-color, and text-decoration-style. Text decorations are drawn across child text elements that means if the parent element specifies a text-decoration then its child element can not remove the decoration specified the parent element.
Syntax:
text-decoration: text-decoration-line text-decoration-style text-decoration-color|initial|inherit;
Property values: All the properties are described well with the example below.
text-decoration-line: It is used to sets various kinds of text-decoration (e.g. underline, overline, etc).
Syntax:
text-decoration: text-decoration-line;
Example: This example illustrates the use of the text-decoration-line Property whose values can be set as underline, line-through, overline.
HTML
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color: green; } body { text-align: center; } ul li { margin-top: 15px; } #example1 { text-decoration: underline; } #example2 { text-decoration: line-through; } #example3 { text-decoration: overline; } </style></head><body> <h1>GeeksforGeeks</h1> <h2> text-decoration: text-decoration-line;</h2> <ul> <li id="example1">Welcome geeks!</li> <li id="example2">Welcome geeks!</li> <li id="example3">Welcome geeks!</li> </ul></body></html> |
Output:
text-decoration-style: It is used to set the text-decoration of an element(e.g. dotted, wavy, etc).
Syntax:
text-decoration: text-decoration-line text-decoration-style;
Example: This example illustrates the use of the text-decoration-style property.
HTML
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color: green; } body { text-align: center; } ul li { margin-top: 15px; } #example1 { text-decoration: underline dotted; } #example2 { text-decoration: underline wavy; } #example3 { text-decoration: underline dashed; } </style></head><body> <h1>GeeksforGeeks</h1> <h2> text-decoration: text-decoration-line text-decoration-style; </h2> <ul> <li id="example1">Welcome geeks!</li> <li id="example2">Welcome geeks!</li> <li id="example3">Welcome geeks!</li> </ul></body></html> |
Output:
text-decoration-color: It is used to specify the color of decorations(overlines, underlines, and line-throughs) over the text.
Syntax:
text-decoration: text-decoration-line text-decoration-color;
Example: This example illustrates the use of the text-decoration-color property.
HTML
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color: green; } body { text-align: center; } 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: text-decoration-line text-decoration-color; </h2> <ul> <li id="example1">Welcome geeks!</li> <li id="example2">Welcome geeks!</li> <li id="example3">Welcome geeks!</li> </ul></body></html> |
Output:
initial: It is used to set an element’s CSS property to its default value.
Syntax:
text-decoration: initial;
Example: This example illustrates the use of the text-decoration property whose value is set to initial.
HTML
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color: green; } body { text-align: center; } #example1 { text-decoration: initial; } </style></head><body> <h1>GeeksforGeeks</h1> <h2> text-decoration: initial;</h2> <a href="#"> This is a link without text-decoration. </a> <br> <br> <a id="example1" href="#"> This is a link with text-decoration set to initial. </a> </body></html> |
Output:
inherit: It is used to inherit a property to an element from its parent element property value.
Syntax:
text-decoration: inherit;
Example: This example illustrates the use of the text-decoration property whose value is set to inherit.
HTML
<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="utf-8"> <title>text-decoration</title> <style> h1 { color: green; } body { text-align: center; } #example1 { text-decoration: underline wavy green; } #example1child { text-decoration: inherit; font-weight: bold; } </style></head><body> <h1>GeeksforGeeks</h1> <h2> text-decoration: inherit;</h2> <p id="example1"> I am parent and <span id="example1child"> this my is child.</span> </p></body></html> |
Output:
Supported browsers: The browsers supported by text-decoration Property are listed below:
- Google Chrome 1.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0
Please Login to comment...