悬停时加粗时内联元素移动

Question

我使用 HTML 列表和 CSS 创建了一个水平菜单。除非您将鼠标悬停在链接上，否则一切正常。你看，我为链接创建了一个粗体悬停状态，现在菜单链接由于粗体大小的不同而发生了变化。

我遇到了与 此 SitePoint 帖子 相同的问题。但是，该帖子没有适当的解决方案。我到处寻找解决方案，但找不到。当然，我不可能是唯一一个尝试这样做的人。

有没有人有任何想法？

PS：我不知道菜单项中文本的宽度，所以我不能只设置 li 项的宽度。

 .nav { margin: 0; padding: 0; }
.nav li {
    list-style: none;
    display: inline;
    border-left: #ffffff 1px solid;
}
.nav li a:link, .nav li a:visited {
    text-decoration: none;
    color: #000;
    margin-left: 8px;
    margin-right: 5px;
}
.nav li a:hover{
    text-decoration: none;
    font-weight: bold;
}
.nav li.first { border: none; }

 <ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

原文由 Billy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过使用与父悬停样式具有相同内容和样式的不可见伪元素来 预设宽度。使用数据属性，如 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>

原文由 350D 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一个妥协的解决方案是用文本阴影伪造粗体，例如：

文本阴影：0 0 0.01px 黑色；

为了更好地比较，我创建了这些示例：

 a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}

 <ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

传递给 text-shadow blur-radius 值非常低将使模糊效果不那么明显。

一般来说，你重复的次数越多 text-shadow 你的文字就会越粗，但同时会失去字母的原始形状。

我应该警告你，将 blur-radius 设置为分数不会在所有浏览器中呈现相同的效果！例如，Safari 需要更大的值才能像 Chrome 一样呈现它。

原文由 Stefan J 发布，翻译遵循 CC BY-SA 4.0 许可协议