La propriété text-underline-position définit la position du soulignement utilisé lorsque la propriété text-decoration prend la valeur underline.

/* Avec un mot-clé */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Avec plusieurs mots-clés */
text-underline-position: under left;
text-underline-position: right under;

/* Valeurs globales */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;

Cette propriété est héritée sur les différents éléments et n'est pas réinitialisée avec la propriété raccourcie text-decoration, ce qui permet de la définir simplement pour l'ensemble du document.

:root {
  /* Une meilleure règle par défaut pour un document */
  /* avec de nombreuses formules chimiques */
  text-underline-position: under;
}

Syntaxe

Valeurs

auto
Ce mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre under et alphabetic.
under
Ce mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas de jambage. Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).
left
In vertical writing-modes, this keyword forces the line to be placed on the left of the characters. In horizontal writing-modes, it is a synonym of under.
right
Pour les modes d'écritures verticaux, ce mot-clé force la ligne à être placée à droite des caractères. Pour les modes d'écritures horizontaux, ce mot-clé est synonyme de under.
auto-pos
Ce mot-clé est synonyme de auto et c'est ce dernier qui doit être utilisé à la place.
above
Ce mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur auto aura un effet semblable.
below
Ce mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur auto aura un effet semblable.

Syntaxe formelle

auto | [ under || [ left | right ] ]

Exemples

HTML

<p class="chimique">
  C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
</p>
<p class="defaut">
  Et là avec des <sub>indices</sub>
  et du jambage
</p>

CSS

.chimique {
  text-decoration: underline;
  text-underline-position: under;
}

.defaut {
  text-decoration: underline;
  text-underline-position: auto;
}

Résultat

Spécifications

Spécification Statut Commentaires
CSS Text Decoration Module Level 3
La définition de 'text-underline-position' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initialeauto
Applicabilitétous les éléments
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 33Edge Support complet 12Firefox Aucun support NonIE Support complet 6Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
underChrome Support complet 33Edge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome Aucun support Non
Notes
Aucun support Non
Notes
Notes See bug 313888.
Edge ? Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non
above and below
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Support complet 5Opera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non
auto-pos
ExpérimentaleNon-standard
Chrome Aucun support NonEdge ? Firefox Aucun support NonIE Support complet 6Opera Aucun support NonSafari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,