Comment puis-je empêcher les éléments de menu horizontal de se déplacer lorsque le texte devient gras au survol ?

Les éléments en ligne se déplacent lorsqu'ils sont mis en gras au survol

Lorsque des éléments d'un menu horizontal se déplacent au survol, cela peut être attribué à la variation de taille entre le texte normal et le texte en gras. . Cet article explore la solution à ce problème courant.

Comprendre le problème

Dans l'exemple fourni, les listes HTML et CSS sont utilisées pour créer un menu horizontal. Lorsque vous survolez des liens, le texte devient gras, ce qui entraîne le déplacement des liens en raison de la différence de largeur entre le texte normal et le texte en gras.

Préréglez la largeur

La solution implique un préréglage la largeur des éléments à l'aide d'un pseudo-élément invisible. Ce pseudo-élément contient le même contenu et le même style que l'état de survol du parent.

a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

• Affichage : block : Fait occuper le pseudo-élément sur toute la largeur de son conteneur .
• Content : attr(title): Récupère le contenu de l'attribut title du parent, lui permettant pour partager le même texte.
• Font-weight : bold : Applique le style gras au pseudo-élément.
• Hauteur : 0 ; Débordement : caché ; Visibilité : masquée : Masque le pseudo-élément à la vue, garantissant qu'il n'affecte pas l'apparence générale de l'élément.

En utilisant un pseudo-élément avec ces propriétés, la largeur de l'élément est prédéfini avant même que l'état de survol ne soit appliqué, éliminant ainsi le problème de décalage.

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!