Texte-décoration-ligne - Astuces CSS

Anonim

La text-decoration-linepropriété décore le texte avec un soulignement, un surlignage, une ligne traversante ou une combinaison de ces lignes.

p ( text-decoration-line: underline; )

Valeurs

  • none: aucune ligne n'est ajoutée et toutes les lignes existantes sont supprimées - par exemple, nonesupprime le soulignement par défaut sur les liens.
  • underline: ajoute un soulignement de 1px sous le texte.
  • overline: ajoute un surlignage 1px au-dessus du texte.
  • line-through: ajoute une ligne de 1 px dans le texte.
  • inherit: hérite de la décoration du parent.

La valeur blinkest 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é.

Combinaison de valeurs

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-line: overline underline line-through; )

Usage

La text-decoration-linepropriété est pratiquement identique à la text-decorationpropriété d' origine . Si tout ce que vous voulez faire est d'ajouter une ou plusieurs lignes à votre texte, text-decorationc'est un meilleur choix car il est pris en charge par tous les navigateurs, même les plus anciens. En règle générale, l'utilisation d'une text-decoration-linedéclaration n'a de sens que lorsque vous écrivez une règle de style à long terme qui inclut text-decoration-styleou une text-decoration-colordéclaration. Si vous souhaitez utiliser les trois ensemble, vous pouvez utiliser la text-decorationpropriété abrégée .

Sténographie

text-decoration-linepeut être utilisé en combinaison avec text-decoration-styleet text-decoration-colordans la text-decorationpropriété abrégée CSS3 (actuellement, seul Firefox le prend entièrement en charge):

.underlined ( text-decoration: underline dotted red; )

Démo

Cette démo fonctionnera dans Safari, Firefox et Chrome avec les fonctionnalités expérimentales de la plate-forme Web activées. La blinkvaleur n'est pas incluse.

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

En rapport

  • texte-décoration
  • texte-décoration-style
  • texte-décoration-couleur
  • texte-décoration-saut

Plus d'information

  • text-decoration-line dans la spécification W3C
  • text-decoration-line chez MDN

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
31 * † 7,1 * 6 ‡ Aucun Aucun Aucun 8 *

* avec -webkitpréfixe
† avec indicateur de fonctionnalités expérimentales de la plate-forme Web activé
‡ 6 - 35 avec -mozpréfixe, sans préfixe à partir de 36.