En este artículo, veremos la propiedad que se puede usar para subrayar, sobrerayar y tachar el texto.
text-decoration : La propiedad text-decoration se usa para agregar decoración al texto. Esta propiedad de estilo se usa para agregar decoraciones como subrayado, sobrerayado y tachado. Esta propiedad también se usa como una propiedad abreviada para la siguiente lista de decoradores de texto.
Sintaxis:
text-decoration: text-decoration-line | text-decoration-style
| text-decoration-color | text-decoration-thickness | initial | inherit;
Valores de propiedad:
- text-decoration-line : Esta propiedad se usa para especificar el tipo de decoración para el texto como subrayado, sobrerayado, etc.
- text-decoration-color : esta propiedad se utiliza para especificar el color de la decoración de texto.
- text-decoration-style : esta propiedad se utiliza para especificar el estilo de decoración de texto como punteado, ondulado, etc.
- text-decoration-thickness : Esta propiedad se usa para especificar el grosor de la línea decorada.
La propiedad text-decoration tiene un valor de propiedad diferente para decorar el texto, es decir , subrayado , sobrelineado y traspaso .
Ejemplo: este ejemplo describe el uso de la propiedad text-decoration para implementar subrayado, sobrerayado y tachado en el texto.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
text-decoration Property
</title>
<style>
h2 {
text-decoration: underline;
}
b {
text-decoration: overline;
}
p {
text-decoration: line-through;
}
</style>
</head>
<body>
<center>
<h2>Welcome To GeeksforGeeks</h2>
<b> Text-decoration Property </b>
<p>
underline, overline, and strikethrough
is applied to the text.
</p>
</center>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo describe la propiedad Text-decoration.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-decoration Property</title>
<style>
h1 {
color: green;
}
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 Property</h2>
<ul>
<li id="example1">
underline wavy green
</li>
<li id="example2">
line-through red
</li>
<li id="example3">
overline blue
</li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akhilvasabhaktula03 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA