Créer un effet de soulignement animé au survol avec CSS

Introduction

Dans ce laboratoire, nous allons apprendre à créer une animation de soulignement au survol avec CSS. Cet effet peut être utilisé pour ajouter un intérêt visuel au texte et améliorer l'expérience utilisateur d'un site web. En suivant les étapes décrites dans ce laboratoire, vous comprendrez mieux comment utiliser CSS pour créer un contenu web dynamique et captivant.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau intermédiaire avec un taux de réussite de 77%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Animation de soulignement au survol

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer un effet de soulignement animé lorsque l'utilisateur survole le texte, suivez ces étapes :

Utilisez display: inline-block pour que le soulignement s'étende juste sur la largeur du contenu textuel.
Utilisez le pseudo-élément ::after avec width: 100% et position: absolute pour le placer sous le contenu.
Utilisez transform: scaleX(0) pour initialement cacher le pseudo-élément.
Utilisez le sélecteur de pseudo-classe :hover pour appliquer transform: scaleX(1) et afficher le pseudo-élément au survol.
Animez transform en utilisant transform-origin: left et une transition appropriée.
Supprimez la propriété transform-origin pour que la transformation provienne du centre de l'élément.

Voici un exemple de code HTML pour appliquer l'effet à un élément de texte :

<p class="hover-underline-animation">Survolez ce texte pour voir l'effet!</p>

Et voici le code CSS correspondant :

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations! Vous avez terminé le laboratoire Animation de soulignement au survol. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.