En este artículo, discutiremos la propiedad text-underline-offset en CSS. Se usa con un texto subrayado pero no es parte de él. Para establecer la distancia de desplazamiento del subrayado desde su posición original. De forma predeterminada, está configurado en automático, pero podemos aumentarlo especificando la longitud o el porcentaje. Si algún elemento contiene varias líneas de decoración de texto, el texto-subrayado-desplazamiento da como resultado solo el subrayado como su valor, no otros valores posibles, es decir, sobrelínea, línea continua.
Sintaxis:
text-underline-offset: auto|<length>|<percentage>;
Valores de propiedad:
- auto: es un valor predeterminado en el que el navegador seleccionará el desplazamiento de subrayado adecuado.
- <longitud>: establece el desplazamiento de un subrayado como una unidad de longitud (también incluye los valores negativos), como em .
- <porcentaje>: Indica el desplazamiento de un subrayado en porcentaje.
- initial: es una propiedad predeterminada para la configuración que es automática.
- heredar: hereda el valor de compensación de subrayado del padre.
- unset: Elimina el valor de compensación actual del elemento.
Ejemplo: En este ejemplo, veremos la implementación de los 3 valores de propiedad.
HTML
<!DOCTYPE html>
<html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
h2 {
text-decoration: underline solid green;
text-underline-offset: auto;
}
span {
text-decoration: underline wavy green;
text-underline-offset: 0.1em;
}
p {
text-decoration: underline overline dotted red;
text-underline-offset: 90%;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<span>A computer science portal for geeks.</span>
<p>
We provide a variety of services for
you to learn, thrive and also have
fun!
</p>
</body>
</html>
Explicación: para la etiqueta de encabezado, el texto está configurado para subrayar con un color verde sólido y el texto-subrayado-desplazamiento está configurado en valor automático. De manera similar, hemos establecido el valor de decoración de texto de la etiqueta <span> como subrayado verde ondulado y el valor de longitud, es decir, el valor de desplazamiento de subrayado de texto está establecido en 0,1 em. En este caso, hemos utilizado la propiedad de porcentaje, es decir, el valor de decoración de texto para la etiqueta <p> se establece en subrayado sobrelínea punteada en rojo y el valor de compensación de texto subrayado se establece en 90%.
Producción:
Navegadores compatibles:
- Chrome 87.0 y superior
- Edge 87.0 y superior
- Firefox 70.0 y superior
- Ópera 73.0 y superior
- Safari 12.1 y superior