text-decoration
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété text-decoration
est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une propriété raccourcie qui permet de paramétrer simultanément les propriétés « détaillées » : text-decoration-line
, text-decoration-color
et text-decoration-style
.
Exemple interactif
<p>Ce texte a <em> des mots mis en avant</em> dedans.</p>
, et cette règle CSS
p { text-decoration: underline; }
, on aura tout le paragraphe souligné, même si on applique la règle
em { text-decoration: none; }
, cela n'aurait aucun impact. En revanche, ajouter la règle
em { text-decoration: overline; }
entraînerait un cumul des décorations pour « des mots mis en avant ».
Note :
La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés text-decoration-color
, text-decoration-line
et text-decoration-style
. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.
Syntaxe
/* Valeurs avec mots-clés */
text-decoration: none; /* Aucune décoration */
text-decoration: underline red; /* On souligne en rouge */
text-decoration: underline wavy red; /* On souligne en rouge avec */
/* une ligne ondulée */
/* Valeurs globales */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
Valeurs
text-decoration-line
-
Cette valeur indique le type de décoration utilisée.
text-decoration-color
-
Cette valeur indique la couleur de la décoration utilisée.
text-decoration-style
-
Cette valeur indique le style à utiliser pour la décoration.
Définition formelle
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
Exemples
CSS
.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.blink {
text-decoration: blink;
}
HTML
<p class="under">Ce texte a une ligne en dessous.</p>
<p class="over">Ce texte a une ligne au dessus.</p>
<p class="line">Ce texte est barré d'une ligne.</p>
<p>
Ce <a class="plain" href="#">lien ne sera pas souligné</a>, comme les liens le
sont normalement. Attention à ces décorations sur les ancres cars le
soulignement sert souvent d'indication pour un hyperlien.
</p>
<p class="underover">Ce texte a des lignes en dessous et au dessus.</p>
<p class="blink">Ce texte peut clignoter selon le navigateur utilisé.</p>
Résultat
Spécifications
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-property |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
L'attribut
list-style
qui contrôle la façon dont les éléments apparaissent dans les listes HTML<ol>
et<ul>
. -
Les propriétés détaillées associées à cette propriété raccourcie :