Maison >interface Web >tutoriel CSS >Comment créer une bordure extensible au survol avec CSS ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-11-16 12:55:03878parcourir

How to Create an Expanding Border on Hover with 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn