La propiedad text-decoration-line se utiliza para establecer varios tipos de decoración de texto. La decoración de texto puede incluir muchos valores, como subrayado, sobrerayado, línea completa, etc. Puede ser posible combinar más de una propiedad de decoración de texto. Por ejemplo, los valores de subrayado y sobrerayado se pueden utilizar para mostrar líneas tanto debajo como sobre el texto.
Sintaxis:
text-decoration-line: none| underline| overline| line-through| initial| inherit;
La propiedad text-decoration es una propiedad abreviada para text-decoration-line (requerido), text-decoration-color y text-decoration-style.
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
ninguno: es el valor predeterminado y se utiliza para especificar ninguna línea para el texto para decorar el texto.
Sintaxis:
text-decoration-line: none;
Ejemplo: este ejemplo demuestra el uso de la propiedad text-decoration-line cuyo valor se establece en 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>
Producción:
subrayar: Se utiliza para mostrar una línea debajo o debajo de un texto.
Sintaxis:
text-decoration-line: underline;
Ejemplo: este ejemplo demuestra el uso de la propiedad text-decoration-line cuyo valor se establece en subrayado.
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>
Producción:
overline: Se utiliza para mostrar una línea sobre el texto.
Sintaxis:
text-decoration-line: overline;
Ejemplo: este ejemplo demuestra el uso de la propiedad text-decoration-line cuyo valor se establece en 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>
Producción:
line-through: Se utiliza para mostrar una línea a través de un texto.
Sintaxis:
text-decoration-line: line through;
Ejemplo: este ejemplo demuestra el uso de la propiedad text-decoration-line cuyo valor se establece en 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>
Producción:
initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado. Es lo mismo que ninguna propiedad.
Sintaxis:
text-decoration-line: initial;
Ejemplo: este ejemplo demuestra el uso de la propiedad text-decoration-line cuyo valor se establece en 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>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad text-decoration-line se enumeran a continuación:
- Google Chrome 57.0
- Microsoft Edge 79.0
- Firefox 36.0
- Apple Safari 12.1
- Ópera 44.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA