Esta propiedad se utiliza para especificar el color de las decoraciones (overlines, underlines y line-throughs) sobre el texto.
Sintaxis:
text-decoration-color: color|initial|inherit;
Valores de propiedad:
- color: Establece el color de la decoración del texto.
Sintaxis:
text-decoration-color: color;
Ejemplo:
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>
Producción:
- initial: establece esta propiedad en su valor predeterminado.
Sintaxis:
text-decoration-color: initial;
Ejemplo:
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>
Producción:
- Google Chrome 57.0
- Borde 79.0
- Firefox 36.0
- Ópera 44.0
- Safari 12.1
Publicación traducida automáticamente
Artículo escrito por Archana choudhary y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA