Pourquoi mon menu horizontal se déplace-t-il au survol et comment puis-je y remédier à l'aide de pseudo-éléments ?

Lors de la mise en œuvre d'un menu horizontal à l'aide de listes HTML et CSS, il est courant de rencontrer un décalage dans l'alignement des éléments de menu lorsque l'état de survol est appliqué. Ce changement se produit parce que la taille de la police en gras à l'état de survol diffère de la taille de police standard.

Ce problème est similaire à celui abordé dans un article de SitePoint, mais sans solution claire. Définir la largeur des éléments li peut ne pas être réalisable si la largeur du texte varie.

Résoudre le décalage d'alignement

Une solution réside dans l'utilisation d'un pseudo-élément invisible pour prédéfinir la largeur de l'élément. Ce pseudo-élément reflète le contenu et le style de l'état de survol, définissant efficacement la largeur de l'élément avant le déclenchement de l'état de survol.

Dans cette solution :

Le pseudo -element (::before) est défini avec un affichage en bloc, lui permettant de prédéfinir la largeur de l'élément.

Il hérite du contenu et font-weight à partir de l'état de survol (en utilisant attr(title) pour définir le contenu).
• La hauteur et le débordement du pseudo-élément sont définis sur 0 et masqués, respectivement, pour le masquer à la vue.
• En prédéfinissant la largeur, les éléments de menu conservent leur alignement au survol, quelle que soit la longueur du texte ou la variation de largeur.

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!