Comment créer un effet de survol de bordure inférieure extensible avec CSS ?

Effet de survol : extension de la bordure inférieure au survol

Dans le but de créer un site Web visuellement attrayant, vous pourriez rencontrer le besoin d'ajouter des éléments interactifs. survolez les effets sur vos éléments. Un effet particulier qui peut améliorer votre conception consiste à élargir la bordure inférieure lors du survol.

Pour obtenir cet effet, vous pouvez utiliser la propriété transform:scaleX() de CSS. En faisant passer la propriété scaleX de 0 à 1 au survol, vous pouvez créer l'illusion d'étendre la bordure inférieure.

Voici un exemple de code pour étendre la bordure inférieure à partir du centre :

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}
h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}
h1:hover:after {
  transform: scaleX(1);
}

Cependant, si vous souhaitez étendre la bordure depuis la gauche ou la droite, vous pouvez modifier la propriété transform-origin comme suit :

h1.fromRight:after {
  transform-origin: 100% 50%;
}
h1.fromLeft:after {
  transform-origin: 0% 50%;
}

Ce code crée un pseudo-élément pour appliquer la bordure et la transition, empêchant le texte lui-même de la transition et du maintien de la structure sémantique de votre HTML.

En mettant en œuvre ces techniques, vous pouvez ajouter un effet de survol dynamique et visuellement attrayant à vos bordures, améliorant ainsi l'expérience utilisateur et faisant ressortir votre site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!