Effet de surlignage animé CSS : Tutoriel + code complet

Vous cherchez à créer un effet de surlignage moderne et élégant sur votre site web ? Grâce au CSS, il est possible d’animer un texte au survol de la souris avec un rendu fluide, professionnel et sans JavaScript. Dans ce tutoriel orienté WebDesign, vous allez apprendre à réaliser un effet de surlignage animé simple, personnalisable et parfaitement adapté aux débutants.

• Créez un effet visuel moderne qui attire l’attention sur vos textes et améliore immédiatement le rendu de vos pages.
• Comprenez comment utiliser le CSS pour animer un surlignage propre, fluide et compatible avec un design professionnel.
• Découvrez comment personnaliser facilement le style, les couleurs et le comportement de l’animation selon votre site.

Un simple texte peut vite devenir banal sur une page web. Pourtant, avec quelques lignes de CSS, vous pouvez transformer un mot, un lien ou une phrase en élément vivant, élégant et interactif. C’est exactement ce que permet un effet de surlignage animé.

Le principe est simple : lorsqu’un visiteur passe sa souris sur un texte, un surlignage apparaît progressivement sous les mots. Le rendu est moderne, discret. Nous n’utiliserons pas le JavaScript, rien de compliqué. Nous allons simplement construire ensemble un effet de surlignage propre et accessible, étape par étape.

Voici le rendu final :

Pourquoi utiliser un effet de surlignage sur un site web ?

Sur internet, tout se joue en quelques secondes. Si votre page semble fade, le visiteur s’en va. À l’inverse, un petit détail visuel bien pensé attire l’œil et donne immédiatement une impression professionnelle.

Un effet de surlignage animé sur texte hover permet notamment :

• de mettre en valeur un mot important ;
• d’améliorer le design d’un lien ;
• de guider naturellement le regard ;
• de moderniser une interface ;
• d’ajouter une touche premium à votre site.

Nous allons obtenir un texte classique, mais lorsqu’on passe la souris dessus :

• un fond coloré apparaît sous les mots ;
• l’animation part de gauche à droite ;
• le texte reste parfaitement lisible ;
• l’ensemble garde un style minimaliste.

Bien sûr, derrière cette simplicité se cache un vrai travail de précision. Et c’est ce que nous allons décortiquer ensemble.

La structure HTML

Commençons par le HTML. Ici, nous voulons cibler uniquement une portion de texte.

<p>
  Passez votre souris sur ce
  <span class="highlight">texte surligné animé</span>
  pour voir l’effet.
</p>

Pourquoi utiliser un span ?

La balise <span> sert à styliser une partie précise d’un texte sans casser la mise en page.

Par exemple :

• <p> représente un paragraphe entier ;
• <span> agit sur quelques mots seulement.

C’est donc la balise idéale pour créer un effet de surlignage sur une expression ciblée.

Si vous utilisiez un <div>, cela passerait à la ligne. Et là, votre joli design ferait déjà la grimace. <span> est un élément inline.

Créer la base visuelle du texte

Avant d’animer quoi que ce soit, on prépare le style du mot concerné.

.highlight {
  position: relative;
  display: inline;
  font-weight: 700;
  text-decoration: none;
}

Décortiquons tout cela…

position: relative;

Cette propriété permet de positionner plus facilement des éléments liés à ce texte.

Même si dans notre exemple l’effet fonctionne sans pseudo-élément complexe, cette habitude est excellente pour évoluer ensuite.

👉 Pour ceux qui débutent, tout savoir sur : Le positionnement CSS

display: inline;

Le texte reste intégré naturellement dans la phrase.

Il ne casse pas la ligne, il se comporte comme un mot normal.

font-weight: 700;

Le texte devient plus visible. Le surlignage attire l’œil, donc autant que le mot ait aussi du caractère.

text-decoration: none;

Très utile si vous appliquez l’effet sur un lien <a> pour supprimer le soulignement classique du navigateur.

Fabriquer le surlignage avec background-image

C’est ici que la magie commence.

.highlight {
  background-image: linear-gradient(
    120deg,
    #ecff9f,
    #d8f36a
  );
}

Pourquoi utiliser un dégradé ?

Au lieu d’un simple fond uni, on utilise un léger dégradé. Résultat :

• plus moderne ;
• plus doux ;
• plus haut de gamme ;
• moins “surligneur de trousse scolaire de 1998”.

👉 Tout comprendre au dégradé en CSS : La propriété linear-gradient

linear-gradient()

Cette fonction CSS génère une image de fond.

Ici :

• 120deg définit l’angle ;
• les deux couleurs créent la transition.

Vous pouvez évidemment choisir vos couleurs :

#ffd6d6
#ffe082
#c8f7c5
#b3e5fc

Masquer le surlignage au départ

Au chargement de la page, le fond ne doit pas être visible.

background-size: 0% 42%;
background-repeat: no-repeat;
background-position: 0 82%;

Regardons cela tranquillement.

background-size: 0% 42%;

Le fond existe… mais sa largeur est de 0%.

• Autrement dit : invisible.

La hauteur reste à 42%, ce qui permet de couvrir uniquement le bas du texte.

background-repeat: no-repeat;

Le fond ne se répète pas.

Sans cela, vous pourriez obtenir plusieurs blocs derrière le texte. Peu élégant, sauf si vous aimez le chaos.

background-position: 0 82%;

Cela place le surlignage :

• à gauche (0)
• vers le bas (82%)

Ainsi, l’effet ressemble à un vrai trait de surligneur sous les lettres.

Déclencher l’animation au hover

Quand la souris passe sur le texte :

.highlight:hover {
  background-size: 100% 42%;
}

On garde la même hauteur. Mais la largeur passe de : 0% à 100%.

Le fond s’étend donc sur toute la largeur du mot.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Et c’est là qu’on obtient l’effet de surlignage animé.

Rendre l’animation fluide

Sans transition, le changement serait brutal.

Ajoutons donc :

transition: background-size 0.45s cubic-bezier(.22, 1, .36, 1);

Décryptage

background-size

On anime uniquement cette propriété.

0.45s

Durée de l’animation : 0,45 seconde.

Rapide, mais visible.

cubic-bezier(...)

C’est une courbe d’animation personnalisée. Cela donne un mouvement plus naturel qu’un simple ease.

En clair, votre texte glisse avec élégance au lieu de surgir comme un ninja stressé.

Le code complet HTML + CSS pour le surlignage d’un texte

Voici la version finale.

<p>
  Découvrez notre
  <span class="highlight">effet de surlignage animé</span>
  en CSS pur.
</p>

.highlight {
  display: inline;
  font-weight: 700;
  background-image: linear-gradient(120deg, #ecff9f, #d8f36a);
  background-repeat: no-repeat;
  background-size: 0% 42%;
  background-position: 0 82%;
  transition: background-size 0.45s cubic-bezier(.22, 1, .36, 1);
}

.highlight:hover {
  background-size: 100% 42%;
}

Appliquer l’effet sur un lien

Très bonne idée pour un menu ou un bouton texte.

<a href="#" class="highlight">Voir nos services</a>

Cela remplace avantageusement le soulignement classique.

Le rendu paraît immédiatement plus moderne.

👉 Classe et Id en HTML et CSS

Personnaliser votre effet de surlignage

Changer la couleur du surlignage :

background-image: linear-gradient(120deg, #ffd6d6, #ff8a80);

Pour un style chaleureux.

Accélérer l’animation

transition: background-size 0.25s ease;

La ralentir

transition: background-size 0.7s ease;

Surlignage plus épais

background-size: 0% 60%;

Surlignage plus discret

background-size: 0% 25%;

Adapter l’effet sur mobile

Sur mobile, il n’y a pas toujours de hover.

Vous pouvez prévoir une interaction au toucher grâce à la pseudo-classe :active :

.highlight:active {
  background-size: 100% 42%;
}

Ainsi, l’utilisateur voit l’effet au toucher.

Accessibilité, le point souvent oublié

Un bon design doit rester utilisable par tous.

Ajoutez :

.highlight:focus-visible {
  outline: 2px solid #111;
}

Ainsi, les personnes naviguant au clavier verront clairement l’élément sélectionné.

C’est propre, professionnel, et souvent négligé.

Les erreurs fréquentes des débutants

• Utiliser un jaune trop vif : Un surlignage fluo peut nuire à la lecture. Préférez des teintes douces.
• Animation trop lente : Si l’effet dure 2 secondes, l’utilisateur aura quitté la page avant la fin.
• Trop d’éléments animés

Si tout bouge partout :

• liens
• titres
• menus
• paragraphes

… le site devient fatigant.

Utilisez l’effet de surlignage avec parcimonie.

Où utiliser cet effet sur votre site ?

L’effet de surlignage fonctionne très bien sur :

• les titres d’articles ;
• les mots-clés importants ;
• les appels à l’action ;
• les menus ;
• les liens de blog ;
• les portfolios ;
• les pages d’accueil premium.

Sur un site vitrine, cela fait souvent la différence entre “site amateur” et “site soigné”.

Variante avancée : animation automatique au chargement

Si vous souhaitez un effet dès l’arrivée sur la page :

.highlight {
  animation: surligne 1s forwards;
}

@keyframes surligne {
  from {
    background-size: 0% 42%;
  }
  to {
    background-size: 100% 42%;
  }
}

• Très efficace pour un hero header.

Mais attention à ne pas surcharger l’expérience.

Pourquoi cet effet plaît autant ?

Parce qu’il combine trois forces :

• il attire l’attention ;
• il reste discret ;
• il donne une sensation premium.

C’est exactement ce qu’on cherche en webdesign moderne.

Le visiteur ne se dira pas :

Oh, quel beau background-size animé !

Mais il ressentira inconsciemment que le site est propre, travaillé et agréable.

Et ça, c’est puissant.

---

Créer un effet de surlignage animé sur texte hover est une excellente manière d’améliorer votre interface sans alourdir votre code. Quelques lignes de CSS suffisent pour transformer un simple mot en élément interactif élégant.

Le plus intéressant, finalement, ce n’est pas l’animation elle-même. C’est ce qu’elle raconte sur votre site : soin du détail, modernité, professionnalisme. En webdesign, ce sont souvent les petites finitions qui marquent les visiteurs. Alors amusez-vous, testez vos couleurs, adaptez le style à votre univers… et laissez votre texte briller intelligemment.