Définit une cellule dans un tableau
Apprenez à utiliser la propriété CSS text-decoration-thickness pour personnaliser l'épaisseur des décorations de texte. Suivez notre tutoriel complet et découvrez des astuces pour des styles de décoration uniques.
La propriété CSS text-decoration-thickness est utilisée pour contrôler l'épaisseur de la ligne de décoration d'un texte. Elle offre un moyen de personnaliser la largeur de la ligne utilisée pour souligner, barrer ou décorer du texte.
La syntaxe générale de la propriété text-decoration-thickness est la suivante :
text-decoration-thickness: valeur;
La valeur peut être spécifiée en pixels, en em, en pourcentage ou avec des valeurs prédéfinies.
Valeurs par défaut | auto |
---|---|
Inherited: | non |
Animable : | non En savoir plus sur l'animable |
Version: | CSS4 |
Syntaxe JavaScript: | object.style.textDecorationThickness="5px" |
Les valeurs possibles pour la propriété text-decoration-thickness sont :
Voici quelques exemples d'utilisation de la propriété text-decoration-thickness :
.souligne { text-decoration: underline; text-decoration-thickness: 2px; } .barrer { text-decoration: line-through; text-decoration-thickness: from-font; }
Dans cet exemple, la classe souligne applique une ligne de soulignement de 2 pixels d'épaisseur, tandis que la classe barrer applique une ligne de barré dont l'épaisseur est basée sur la police du texte.
Modifiez la valeur de l'épaisseur de la décoration du texte dans l'exemple suivant pour voir comment la propriété text-decoration-thickness affecte la décoration du texte de l'élément :
Exemple : Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Tutoriel text-decoration-thickness</title> <style> body { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } h1 { display: block; font-size: 2em; color: hsl(207, 90%, 54%); text-decoration: underline; } @supports not (text-decoration-thickness: 1px) { h1::after { content: "Your browser doesn't support this property"; display: block; color: #e43; margin-top: 15px; font-weight: bold; text-decoration: unset; font-size: 12px; } } input { width: 200px; margin: 4rem auto 2rem; } output { display: block; } .code-container { width: 375px; max-width: 100%; overflow-x: auto; text-align: center; background-color: #272822; padding: 1.5em 0; border-radius: 3px; color: #F8F8F2; text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Consolas, Monaco, 'Andale Mono', monospace; } .token-property { color: #F92672; } .token-function { color: #E6DB74; display: inline-block; width: 40px; } .token-selector { color: #a6e22e; } </style> </head> <body> <h1>Modifier l’épaisseur du soulignement à l’aide du curseur</h1> <input type="range" min="1" max="20" step="1" value="3"> <output class="code-container"><span class="token-selector">h1</span> { <span class="token-property">text-decoration-thickness</span>: <span class="token-function">3px</span> }</output> <script>var text = document.querySelector('h1'), slider = document.querySelector('input'); slider.addEventListener('input', function () { text.style.textDecorationThickness = this.value + 'px'; document.querySelector('.token-function').textContent = this.value + 'px'; }, false);</script> </body> </html>
Dans cet exemple, lorsque vous déplacez le curseur, la valeur sélectionnée est utilisée pour mettre à jour l'épaisseur du soulignement du titre en temps réel. De plus, la valeur sélectionnée est affichée dans l'élément
Voici quelques astuces et conseils pour utiliser la propriété text-decoration-thickness :
Avec la propriété text-decoration-thickness, vous pouvez ajouter une touche d'originalité et de personnalisation à la décoration de votre texte. Expérimentez avec les différentes valeurs et combinaisons pour obtenir l'effet souhaité.
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- indiquent la première version qui fonctionne avec un préfixe.
Explorateur | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
Verssion | 89 | 89 | 70 | 12.1 | 75 |