悬停时，行内元素变为粗体

我用HTML列表和CSS创建了一个水平菜单。除非你将鼠标悬停在链接上，否则一切都会正常工作。你看，我为链接创建了一个粗体悬停状态，现在菜单链接因为粗体大小的不同而移动。
我遇到的问题与this SitePoint post相同。然而，这个职位没有合适的解决方案。我到处都找不到解决方案。
当然，我不是唯一一个想这么做的人。
有人有什么想法吗？
附言：我不知道菜单项中文本的宽度，所以我不能设置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>

最佳答案：

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::after {
    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伪元素中的粗体（或任何:after状态样式）内容保留空间，并使用标题标记作为内容源。