Texte-souligné-position - Astuces CSS

Anonim

La text-underline-positionpropriété définit le placement du soulignement sur les liens ou sur le texte avec text-decoration: underline;appliqué.

a ( text-underline-position: under; )

Valeurs

Voici les valeurs spécifiées dans la recommandation candidate de niveau 3 du module de décoration de texte CSS du W3C:

  • auto: le défaut. Le navigateur décidera entre placer le soulignement sur la ligne de base du texte ou en dessous.
  • inherit: hérite de la position de soulignement du parent.
  • under: place le soulignement sous le texte avec un espace supplémentaire pour éviter de croiser les descendants.
  • left: pour les modes d'écriture verticale. Cela place la ligne à gauche du texte.
  • right: pour les modes d'écriture verticale. Cela place la ligne à droite du texte.

Microsoft utilise un ensemble de valeurs différent pour Internet Explorer:

  • auto: le défaut. Place le soulignement sous le texte pour toutes les langues sauf le japonais (voir le lien MSDN dans la section «Plus d'informations» ci-dessous pour plus de détails).
  • above: positionne le soulignement au-dessus du texte. Visuellement identique àtext-decoration: overline;
  • below: positionne le soulignement sous le texte. Notez que ceci est différent de under- cela n'effacera pas les descendants.
  • auto-posfonctionne de la même manière que l'implémentation MS de auto.

Démo

Au moment d'écrire ces text-underline-positionlignes , n'est que partiellement pris en charge par Chrome (33+ avec des indicateurs expérimentaux activés) et Internet Explorer 6+. Chrome prend en charge les auto, inheritet les undervaleurs de la recommandation candidate du W3C, tandis que IE prend en charge ses propres valeurs alternatives.

Cette démo montre les valeurs underet belowdans les navigateurs qui les prennent en charge.

Voir le Pen text-underline-position par CSS-Tricks (@ css-tricks) sur CodePen.

En rapport

  • texte-décoration

Plus d'information

  • text-underline-position dans le module de décoration de texte CSS niveau 3 CR.
  • text-underline-position chez MSDN.

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
33 * Aucun Aucun Aucun 6 † Aucun Aucun

* avec le -webkitpréfixe et les indicateurs expérimentaux activés dans chrome: // flags. leftet rightvaleurs non prises en charge.
† avec -mspréfixe et valeurs spécifiques à IE.