Comment empêcher le décalage horizontal des éléments en ligne lors du survol lors de la mise en gras ?

Résoudre le problème de décalage après que les éléments en ligne deviennent plus épais lors du survol

Lors de l'utilisation de listes HTML et CSS pour créer des menus horizontaux, les utilisateurs peuvent vous rencontrera un problème : lorsque vous définissez le lien pour qu'il soit de plus en plus épais lorsqu'il est suspendu, le lien du menu sera décalé en raison de la différence d'épaisseur.

Pour résoudre ce problème nous pouvons adopter la solution suivante :

Prérégler la largeur

Utiliser un pseudo-élément invisible qui a le même contenu et le même style comme style de survol parent. Utilisez les attributs de données (tels que le titre) comme source de contenu.

li {
  display: inline-block;
  font-size: 0;
}

li a {
  display: inline-block;
  text-align: center;
  font: normal 16px Arial;
  text-transform: uppercase;
}

a:hover {
  font-weight: bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
  display: block;
  content: attr(title);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul>
  <li><a href="#" title="height">height</a></li>
  <li><a href="#" title="icon">icon</a></li>
  <li><a href="#" title="left">left</a></li>
  <li><a href="#" title="letter-spacing">letter-spacing</a></li>
  <li><a href="#" title="line-height">line-height</a></li>
</ul>

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!