Sommaire

Les Texte:décorationdécorations

1. Le module CSS

Les décorations de texte font partie du module Text Decoration Module Level 3, qui est en Candidate Recommendation au 13 août 2019 : https://www.w3.org/TR/css-text-decor-3/

2. Les lignes pour le Texte:lignes pourtexte

Les décorations permettent d’appliquer une ligne, au-dessus, en-dessous ou en travers du texte, et nous pouvons ajouter une couleur et un type à ces lignes.

Voici les trois propriétés à utiliser :

  • text-decoration-line pour définir la position de la ligne. Les valeurs possibles sont : none, underline, overline, line-through, underline overline et underline line-through.

  • text-decoration-color pour choisir la couleur de la ligne.

  • text-decoration-style pour appliquer un type de ligne (pointillée, hachurée…). Voici les valeurs que vous pouvez exploiter : solid, double, dotted, dashed et wavy.

Vous pouvez aussi utiliser la syntaxe raccourcie : Texte:text-decorationtext-decoration. Les valeurs sont à indiquer dans cet ordre : text-decoration-line text-decoration-style text-decoration-color. Les valeurs sont simplement séparées par un espace.

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
<head> 
   <meta charset="UTF-8"> 
   <title>Titre de la page</title> 
   <style> 
       .important { 
      ...