Posición-subrayado-texto - Trucos CSS

Anonim

La text-underline-positionpropiedad establece la ubicación del subrayado en los enlaces o en el texto text-decoration: underline;aplicado.

a ( text-underline-position: under; )

Valores

Estos son los valores especificados en la Recomendación Candidata del Nivel 3 del Módulo de Decoración de Texto CSS del W3C:

  • auto: el valor por defecto. El navegador decidirá entre colocar el subrayado en la línea de base del texto o debajo de él.
  • inherit: hereda la posición de subrayado del padre.
  • under: coloca el subrayado debajo del texto con espacio adicional para evitar cruzar descendientes.
  • left: para modos de escritura vertical. Esto coloca la línea a la izquierda del texto.
  • right: para modos de escritura vertical. Esto coloca la línea a la derecha del texto.

Microsoft usa un conjunto diferente de valores para Internet Explorer:

  • auto: el valor por defecto. Coloca el subrayado debajo del texto para todos los idiomas excepto el japonés (consulte el enlace de MSDN en la sección "Más información" a continuación para obtener más detalles).
  • above: coloca el subrayado sobre el texto. Visualmente idéntico atext-decoration: overline;
  • below: coloca el subrayado debajo del texto. Tenga en cuenta que esto es diferente de under: no borrará los descendientes.
  • auto-posfunciona igual que la implementación de MS de auto.

Manifestación

En el momento de escribir este artículo, text-underline-positionsolo es parcialmente compatible con Chrome (33+ con indicadores experimentales habilitados) e Internet Explorer 6+. Chrome es compatible con los auto, inherity underlos valores de la recomendación W3C candidato, mientras que IE apoya a sus propios valores alternativos.

Esta demostración muestra los valores undery belowen los navegadores que los admiten.

Vea la posición del subrayado del texto del lápiz por CSS-Tricks (@ css-tricks) en CodePen.

Relacionado

  • decoración de texto

Más información

  • text-underline-position en el Módulo de Decoración de Texto CSS Nivel 3 CR.
  • text-underline-position en MSDN.

Soporte del navegador

Cromo Safari Firefox Ópera ES DECIR Androide iOS
33 * Ninguno Ninguno Ninguno 6 † Ninguno Ninguno

* con -webkitprefijo y banderas experimentales habilitadas en chrome: // flags. lefty rightvalores no admitidos.
† con -msprefijo y valores específicos de IE.