Le guide complet sur les barres de soulignement (CSS)

Tout tout tout... Vous saurez tout sur les barres de soulignement ! Bon, d'accord, vous avez reconnu la musique au moins ? En tout cas, les barres de soulignement ne se limitent pas à souligner nos textes de temps en temps, il s'agit d'un véritable outil de stylisation nous permettant d'ajouter des barres au-dessous, mais aussi au-dessus, sous forme de vague, de pointillés, de tirets... Vous l'aurez compris, nous allons voir tout ceci dans cet article.

La propriété aux multiples visages

La propriété text-decoration est la propriété qui nous permet jusqu'à maintenant de souligner le texte. Vous savez, avec la valeur underline ? Bon. Mais ce n'est pas vraiment la seule valeur possible avec cette propriété, il y en a beaucoup d'autres. On parle d'ailleurs de propriété qui permet de décorer le text et non pas de le souligner.

Autre point important : text-decoration est une propriété raccourcie ! Vous avez peut-être l'habitude de l'utiliser, mais elle combine en fait :

1. text-decoration-line - Elle permet de définir la position des lignes (qui a dit qu'on ne pouvait que surligner ?) ;
2. text-decoration-color - Celle-ci permet de modifier la couleur de la ligne ;
3. text-decoration-style - Dans le but de définir le style de la ligne.

Text-decoration-line

La propriété text-decoration-line, comme nous venons de le voir, permet de définir la position des lignes. Et c'est peut-être la chose la plus importante que vous allez apprendre dans cet article (quoi que... À la fin, nous vous réservons une belle surprise).

Voici les valeurs possibles pour text-decoration-line :

• none - Pour n'afficher aucune ligne de décoration ;
• underline - Pour afficher une barre de décoration au-dessous (pour souligner) ;
• overline - Pour afficher une barre de décoration au-dessus ;
• line-through - Pour afficher une barre de décoration au milieu (pour barrer).

Alors ? Qu'en pensez-vous ? Nous avons l'habitude des deux premières valeurs none et underline mais lorsqu'il s'agit de barrer un texte (line-through) ou de lui placer une ligne au-dessus (overline) c'est une autre paire de manches.

Et ce que vous ne saviez peut-être pas ? Nous pouvons combiner ces valeurs. Par exemple avec :

text-decoration-line: underline overline;

Nous affichons une barre au-dessous (underline) mais également au-dessus (overline).

Plutôt sympa non ? Et bien entendu, vous pouvez continuer en précisant également line-through pour vous retrouver avec une barre au-dessus puis au milieu et au-dessous.

Text-decoration-color

Pour la propriété text-decoration-color nous allons pouvoir aller plus vite : elle permet juste de changer la couleur des lignes décorant le texte.

text-decoration-color: #613BDB;

Va donc nous permettre de mettre les lignes en violet (la couleur de Believemy).

Text-decoration-style

Et pour terminer, la propriété text-decoration-style va nous permettre de changer le style de la ligne. Pour le moment, c'est un peu... linéaire.

Voici les valeurs que nous pouvons utiliser avec text-decoration-style :

• double - Affiche des lignes en double ;
• solid - Affiche une ligne simple ;
• dotted - Affiche des pointillés ;
• dashed - Affiche des tirés ;
• wavy - Affiche des vagues.

Allez, un exemple pour la route et pour voir ce que donne wavy :

text-decoration-line: underline overline;
text-decoration-color: #613BDB;
text-decoration-style: wavy;

De toute évidence, nous avons du goût.

Text-decoration

Toutes ces propriétés sont très intéressantes lorsqu'elles sont utilisées ensemble, donnant naissance à des éléments très bien décorés avec un style assez original. Mais toutes ces propriétés sont longues à ajouter... Fort heureusement comme nous l'avions vu ensemble, nous pouvons utiliser text-decoration pour toutes les dominer d'un coup.

Le fonctionnement de la propriété text-decoration est représenté ici :

text-decoration: <text-decoration-line> <text-decoration-style> <text-decoration-color>

Si nous souhaitons reproduire l'exemple précédent nous aurons donc :

text-decoration: underline overline wavy #613bdb;

Vous savez maintenant tout sur text-decoration et les propriétés qu'elle utilise text-decoration-line / text-decoration-style / text-decoration-color. Si vous souhaitez en savoir plus sur le HTML et le CSS, nous avons une formation complète dédiée à ces deux langages de programmation. N'hésitez pas non plus à partager cet article à votre entourage sur vos réseaux-sociaux. Merci !