oujood.com

la propriété CSS text-decoration-line : Ajoutez du style à votre texte

Découvrez comment utiliser la propriété CSS text-decoration-line pour ajouter des décorations et des styles de texte à vos éléments HTML. Ce tutoriel complet vous guidera à travers les différentes valeurs possibles et vous donnera des exemples pratiques d'utilisation.

chercher |

Tutoriel CSS : text-decoration-line

La propriété CSS text-decoration-line permet de spécifier le type de décoration à appliquer à un texte. Elle peut être utilisée pour ajouter des lignes, des traits, ou d'autres styles décoratifs à un texte.

Syntaxe générale

La syntaxe générale de la propriété text-decoration-line est la suivante :

selector {
  text-decoration-line: value;
}
Valeurs par défautnone
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.textDecorationLine="overline"

Valeurs possibles

Les valeurs possibles pour la propriété text-decoration-line sont :

  • none : aucune décoration
  • underline : soulignement
  • overline : ligne au-dessus du texte
  • line-through : ligne au milieu du texte (texte barré)
  • blink : clignotement
  • inherit : hérite de la valeur de décoration du parent

Exemples pratiques d'utilisation

Voici quelques exemples d'utilisation de la propriété text-decoration-line:

/* Souligner un lien au survol */
a:hover {
  text-decoration-line: underline;
}
/* Barrer un élément après un clic */
button:active {
  text-decoration-line: line-through;
}

Exemple :       Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété text-decoration-line css</title> 
    <style>
		.underline {
		  -webkit-text-decoration-line: underline;
		  text-decoration-line: underline; 
		}

		.overline { 
		  -webkit-text-decoration-line: overline;
		  text-decoration-line: overline;
		}

		.line-through {
		  -webkit-text-decoration-line: line-through;
		  text-decoration-line: line-through;
		}

		.blink { 
		  -webkit-text-decoration-line: blink;
		  text-decoration-line: blink;
		}

		.multilines {
		  -webkit-text-decoration-line: underline overline line-through;
		  text-decoration-line: underline overline line-through;
		}


		/* Styling for Pen, unrelated to text-decoration-line */

		body { 
		  font-family: sans-serif;
		  font-size: 2em;
		}
    </style>
</head>
<body>
    <h1>La propriété CSS text-decoration-line</h1>
<p class="underline">text-decoration-line: underline;</p>
<p class="overline">text-decoration-line: overline;</p>
<p class="line-through">text-decoration-line: line-through;</p>
<p class="multilines"> text-decoration-line: underline overline line-through;</p>
</body>
</html>

Astuces et conseils d'utilisation

  • Utilisez la valeur none pour supprimer toute décoration par défaut sur un élément.
  • Le clignotement (blink) n'est pas pris en charge par tous les navigateurs, utilisez-le avec précaution.
  • Vous pouvez combiner plusieurs valeurs en utilisant la propriété raccourcie text-decoration :
  • Vous pouvez aussi utiliser text-decoration-line en combinaison avec text-decoration-style et text-decoration-color
/* Combinaison de soulignement et de ligne au milieu */
span.highlight {
  text-decoration: underline line-through;
}

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- ou -moz- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57.0 79.0 36.0
6.0 -moz-
12.1
7.1 -webkit-
44


Voir aussi nos tutoriel :

fonction strrev, strrev

Inverse une chaîne

base de donnés gestion de contacts

Script php bdd contact finie

L'attribut id

Spécifie un id unique pour un élément