CSS | text-decoration-color Property
This property is used to specify the color of decorations(overlines, underlines, and line-throughs) over the text.
Syntax:
text-decoration-color: color|initial|inherit;
Property values:
- color: Sets the color of the text-decoration.
Syntax:
text-decoration-color: color;
Example:
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; } table { margin: auto; } th { padding: 10px 25px; } .underline { text-decoration: underline wavy; } .overline { text-decoration: overline solid; } .line-through { text-decoration: line-through double; } .red td { text-decoration-color: red; } .green td { text-decoration-color: green; } .blue td { text-decoration-color: blue; } </style></head><body> <h1>GeeksforGeeks</h1> <h2> text-decoration-color: color;</h2> <table> <tr> <th>underline</th> <th>line-through</th> <th>overline</th> </tr> <tr class="red"> <td class="underline">Hello Geeks!</td> <td class="line-through">Hello Geeks!</td> <td class="overline">Hello Geeks!</td> </tr> <tr class="green"> <td class="underline">Hello Geeks!</td> <td class="line-through">Hello Geeks!</td> <td class="overline">Hello Geeks!</td> </tr> <tr class="blue"> <td class="underline">Hello Geeks!</td> <td class="line-through">Hello Geeks!</td> <td class="overline">Hello Geeks!</td> </tr> </table></body></html> |
Output:
- initial: Sets this property to its default value.
Syntax:
text-decoration-color: initial;
Example:
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; } #example { text-decoration: underline double; text-decoration-color: initial; } </style></head><body> <h1>GeeksforGeeks</h1> <h2> text-decoration-color: initial;</h2> <div id="example"> This text-decoration-color of this text is set to initial. </div></body></html> |
Output:
- Google Chrome 57.0
- Edge 79.0
- Firefox 36.0
- Opera 44.0
- Safari 12.1
Please Login to comment...