Surligner un titre avec une ligne dégradée

Tutoriel : Comment surligner un titre avec une ligne dégradée en CSS

Dans ce tutoriel, nous allons apprendre à surligner un titre avec une ligne dégradée en utilisant uniquement du CSS. Nous utiliserons un élément h1 et y ajouterons un effet de ligne dégradée sous le texte.

Étape 1 : Créer le fichier HTML

Créez un fichier HTML avec la structure de base et un élément h1 auquel nous appliquerons les styles CSS.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre avec Surlignage Dégradé</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Mon Titre Surligné</h1>
</body>
</html>

Étape 2 : Créer le fichier CSS

Créez un fichier CSS nommé styles.css et liez-le dans votre fichier HTML comme montré ci-dessus. Ensuite, ajoutez les styles CSS suivants dans le fichier styles.css :

h1 {
  text-align: center;
  border: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.6rem;
}

h1:before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 7rem;
  background: linear-gradient(to right, #A02756, #EE345D, #DEE232);
}

Explications du CSS

Styles pour le h1 :
- text-align: center; : Centre le texte horizontalement.
- border: none; : Supprime les bordures par défaut (s'il y en avait).
- position: relative; : Positionne l'élément relativement à son emplacement normal, ce qui permet de positionner l'élément pseudo ::before par rapport à cet élément.
- display: flex; : Utilise Flexbox pour centrer les éléments enfants.
- align-items: center; et justify-content: center; : Centrent le contenu du h1 verticalement et horizontalement.
- padding-bottom: 1.6rem; : Ajoute un espace en bas du h1 pour que la ligne dégradée ne chevauche pas le texte.
Styles pour h1:before :
- content: ""; : Crée un élément pseudo ::before vide.
- position: absolute; : Permet de positionner l'élément pseudo par rapport à l'élément parent (h1).
- bottom: 0; : Place l'élément pseudo au bas du h1.
- height: 2px; : Définit la hauteur de la ligne dégradée.
- width: 7rem; : Définit la largeur de la ligne dégradée.
- background: linear-gradient(to right, #A02756, #EE345D, #DEE232); : Applique un dégradé de gauche à droite avec les couleurs spécifiées.

Étape 3 : Personnalisation

Vous pouvez ajuster les styles selon vos besoins :

Changez les couleurs du dégradé dans la propriété background.
Modifiez la largeur (width) et la hauteur (height) de la ligne dégradée.
Ajustez le padding-bottom du h1 pour contrôler l'espace entre le texte et la ligne.

Résultat Final

En suivant ces étapes, vous aurez un titre centré avec une ligne dégradée en dessous, créant un effet de surlignage élégant.

Voir le résultat sur codepen

Et voilà ! Vous avez maintenant un titre surligné avec une ligne dégradée.

Vous désirez un site internet pour vous ou votre entreprise ? contactez-nous !