CSS text-decoration-color Property can be used to specify the color of decorations(overlines, underlines, and line-throughs) over the text.
Syntax
text-decoration-color: color|initial|inherit;
Property Values
Values |
Descriptions |
---|---|
color |
It sets the color of the text-decoration |
initial |
It is used to set the property to its default value. |
inherit |
It inherits the property from its parent element. |
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:
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:
Supported Browser
The browser supported by CSS text-decoration-color Property are listed below:
- Google Chrome 57.0
- Edge 79.0
- Firefox 36.0
- Opera 44.0
- Safari 12.1