Comment créer une bordure extensible au survol avec CSS ?

Agrandissement de la bordure au survol avec CSS

Vous désirez une bordure qui s'agrandit lorsque la souris la survole. Voici une approche alternative pour obtenir cet effet :

L'utilisation de la propriété CSS transform, en particulier transform:scaleX(), permet de mettre à l'échelle l'élément de bordure.

h1 {
  display: inline-block;
}

h1:after {
  content: "";
  border-bottom: 3px solid #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}

Dans cette approche, nous appliquez les propriétés de transformation et de transition à un pseudo-élément (::after) pour éviter d'affecter le contenu du texte et ajoutez le balisage nécessaire.

Pour étendre la bordure depuis la gauche ou la droite, ajustez la propriété transform-origin en conséquence :

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

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

En personnalisant l'origine de la transformation, vous pouvez contrôler la direction de l'expansion de la frontière.

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!