加粗时如何防止内联元素悬停时水平移动？

解决悬停时内联元素变粗后偏移问题

在利用 HTML 列表和 CSS 创建水平菜单时，用户可能会遇到一个难题：将链接设为悬浮时加粗变粗时，菜单链接会因粗细差异而偏移。

为了解决这个问题，我们可以采取以下解决方案：

预先设置宽度

使用一个不可见的伪元素，该元素具有与父悬停样式相同的内容和样式。使用数据属性（如 title）作为内容的来源。

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>

以上是加粗时如何防止内联元素悬停时水平移动？的详细内容。更多信息请关注PHP中文网其他相关文章！