内联元素在悬停时变粗时会发生变化

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>

Answer 1

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;

}

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>

检查JSfiddle上的工作示例。这个想法是为伪元素中的粗体（或任何:hover状态样式）内容保留空间，:before并使用title标签作为内容源。