Desplazamiento-subrayado-texto - Trucos CSS

La text-underline-offsetpropiedad en CSS establece la distancia de los subrayados del texto desde su posición inicial.

.text ( text-underline-offset: 0.5em; )

Una vez que aplica un subrayado para un elemento que usa text-decorationcon el valor de subrayado , puede decir qué tan lejos debe estar esa línea de su texto usando la text-underline-offsetpropiedad.

Valores

• auto: (Predeterminado) El navegador especificará un desplazamiento apropiado para los subrayados.
• : Cualquier longitud válida con una unidad especificada (incluidos los valores negativos). Esto reemplaza cualquier información en la fuente y el navegador predeterminado.
• percentage: Especifica el desplazamiento de los subrayados como un porcentaje de 1em en la fuente del elemento.
• initial: La configuración predeterminada de la propiedad, que es auto.
• inherit: Adopta el valor de compensación de subrayado del padre.
• unset: Elimina el desplazamiento actual del elemento.

Manifestación

En la siguiente demostración puedes cambiar el valor de text-underline-offsetpara ver cómo afecta la decoración del texto del elemento:

Notas

• text-underline-offset no es parte de la abreviatura de text-decoration.
• No funciona en otras text-decorationlíneas, como line-througho overline.
• Se aceptan valores negativos, lo que compensa el subrayado hacia adentro.

Es constante para los descendientes

Una vez que establezca una decoración para un elemento, todos sus hijos también tendrán esa decoración. Ahora imagina que quieres cambiar el desplazamiento del subrayado de uno de los hijos:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Esto no funciona porque no puede anular un desplazamiento de un subrayado especificado por elementos ancestros. Para que esto funcione, debe establecer una especificidad de subrayado para el elemento en sí:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Se recomienda usar em

El beneficio de usar un valor relativo como em es que el desplazamiento se escalará con el cambio del font-sizevalor. Por otro lado, si usa una unidad de longitud fija (por ejemplo, píxeles), el desplazamiento no se ajustará a los cambios y puede que no sea la distancia que le gustaría tener para su texto:

Porcentaje y cascada

Para esta propiedad, una longitud se heredará como un valor fijo y no se escalará con la fuente. Por otro lado, un porcentaje heredará como un valor relativo y, por lo tanto, escalará con los cambios en la fuente a medida que hereda.

La siguiente demostración muestra la comparación entre usar em y valores porcentuales en el caso de la herencia y, como puede ver, en el lado izquierdo (en el que estamos usando em) el valor heredado es una longitud fija. Puede verificar el valor calculado en sus DevTools. Eso significa que no se escala con el cambio en la fuente. En el lado derecho, sin embargo, los textos heredan un valor relativo (en este caso el 100%); por lo tanto, el desplazamiento se escala con el cambio en la fuente:

Modos de escritura y posición de subrayado de texto

Tener un modo de escritura vertical afecta la posición del subrayado. Eso cambiará la dirección del desplazamiento aplicado en el elemento. Juega con los valores en la siguiente demostración:

Relacionado

• text-decoration
• text-underline-position
• text-decoration-thickness

Más información

Módulo de decoración de texto CSS, nivel 4 (borrador del editor)

Soporte de navegador

En el momento de escribir este artículo, Firefox es el único navegador con soporte completo. Safari no admite valores porcentuales.

desplazamiento de subrayado de texto

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	No	70+	No	12.1+	Todos

Android Chrome	Android Firefox	Navegador de Android	Safari de iOS	Opera Mini
No	No	No	12,2+	sí

desplazamiento de subrayado de texto: porcentaje

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	No	74+	No	No	No

Android Chrome	Android Firefox	Navegador de Android	Safari de iOS	Opera Mini
No	No	No	No	sí