Propriété CSS text-decoration-line
La propriété text-decoration-line spécifie le type de ligne utilisé pour la décoration de texte.
La propriété text-decoration-line fait partie des propriétés CSS3.
La propriété text-decoration-line accepte une ou plusieurs valeurs.
INFO
La propriété text-decoration-line est entièrement prise en charge dans tous les navigateurs modernes sans préfixes fournisseurs.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.textDecorationLine = "overline underline"; |
Syntaxe
Syntaxe CSS text-decoration-line
text-decoration-line: none | underline | overline | line-through | initial | inherit;Exemple de la propriété text-decoration-line :
Exemple de code CSS text-decoration-line
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Résultat
Exemple de la propriété text-decoration-line avec la valeur "underline" :
Exemple de CSS text-decoration-line avec la valeur underline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemple de la propriété text-decoration-line avec la valeur "line-through" :
Exemple de CSS text-decoration-line avec la valeur line-through
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: line-through;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemple de la propriété text-decoration-line avec toutes les valeurs :
Exemple de toutes les valeurs CSS text-decoration-line
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: none;
}
div.t2 {
text-decoration-line: underline;
}
div.t3 {
text-decoration-line: line-through;
}
div.t4 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text...
</div>
<div class="t2">
Lorem Ipsum is simply dummy text...
</div>
<div class="t3">
Lorem Ipsum is simply dummy text...
</div>
<div class="t4">
Lorem Ipsum is simply dummy text...
</div>
</body>
</html>Valeurs
| Valeur | Description | Essayer » |
|---|---|---|
| none | Aucune ligne n'est spécifiée. | Essayer » |
| underline | Spécifie une ligne sous le texte. | Essayer » |
| overline | Spécifie une ligne au-dessus du texte. | Essayer » |
| line-through | Spécifie une ligne barrée à travers le texte. | Essayer » |
| initial | Définit la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
La propriété text-decoration-line prenait précédemment en charge une valeur blink qui faisait clignoter le texte, mais cette valeur est désormais obsolète.
Pratique
Lesquelles de ces valeurs sont valides pour la propriété 'text-decoration-line' en CSS ?