Texte-décoration - Astuces CSS

Anonim

La text-decorationpropriété ajoute un soulignement, un surlignage, une traversée ou une combinaison de lignes au texte sélectionné.

h3 ( text-decoration: underline; )

Valeurs

  • none: aucune ligne n'est dessinée et toute décoration existante est supprimée.
  • underline: trace une ligne de 1 px à travers le texte à sa ligne de base.
  • line-through: trace une ligne 1px à travers le texte à son point «milieu».
  • overline: trace une ligne 1px à travers le texte, directement au-dessus de son point «haut».
  • inherit: hérite de la décoration du parent.

La blinkvaleur est dans la spécification W3C, mais elle est obsolète et ne fonctionnera dans aucun navigateur actuel. Quand cela fonctionnait, il donnait l'impression que le texte «clignote» en le basculant rapidement entre 0% et 100% d'opacité.

Démo

Voir le stylet CSS-Tricks: Text Decoration par CSS-Tricks (@ css-tricks) sur CodePen.

Notes d'utilisation

Vous pouvez combiner les underline, overlineou les line-throughvaleurs dans une liste séparée par des espaces pour ajouter des lignes de décoration multiples:

p ( text-decoration: overline underline line-through; )

Par défaut, la ou les lignes héritent de la couleur du texte définie par sa colorpropriété. Vous pouvez modifier cela dans les navigateurs qui prennent en charge la text-decoration-colorpropriété ou la propriété abrégée à trois valeurs.

text-decoration comme propriété abrégée

text-decorationpeut être utilisé en combinaison avec text-decoration-styleet text-decoration-colorcomme propriété abrégée:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Actuellement, seul Firefox prend en charge ce sans préfixe. Safari le prend en charge avec le -webkitpréfixe. Chrome a également besoin du -webkitpréfixe et des fonctionnalités de plate-forme Web expérimentale activées dans les indicateurs Chrome.

En rapport

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Plus d'information

  • text-decoration comme propriété abrégée dans la spécification W3C Module de décoration de texte CSS Niveau 3 CR
  • text-decoration chez MDN

Prise en charge du navigateur

Tous les navigateurs prennent en charge la propriété «longhand» CSS2.1 text-decoration. La propriété abrégée et les sous-propriétés text-decoration-color, text-decoration-lineet text-decoration-stylesont prises en charge sans préfixe dans Firefox et avec le -webkitpréfixe dans Safari. Chrome reconnaîtra également ces valeurs avec le -webkitpréfixe et l'indicateur Plateformes Web expérimentales activés.

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
91 87 Non 88 TP

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 81 14,0-14,4 *

* text-decorationentièrement pris en charge, sous-propriétés prises en charge avec le -webkitpréfixe.
† Les sous-propriétés nécessitent en outre l'activation du drapeau des fonctionnalités de la plate-forme Web expérimentale.
‡ CSS2.1 text-decorationuniquement; sous-propriétés non prises en charge.