ul { list-style-marker: none; padding: 0; } li { display: inline-block; } li + li { margin-left: 1em; } a { display: block; position: relative; text-align: center; } a:before, a:after { content: attr(aria-label); text-decoration: inherit; } a:before { font-weight: bold; visibility: hidden; } a:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } a:hover:before { visibility: visible; } a:hover:after { display: none; } <ul> <li> <a href="" aria-label="Long-long-long"></a> </li><li> <a href="" aria-label="or"></a> </li><li> <a href="" aria-label="Short"></a> </li><li> <a href="" aria-label="Links"></a> </li><li> <a href="" aria-label="Here"></a> </li> </ul>

这个呢?一个javascript - CSS3免费的解决方案。

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

你可以使用"margin"属性:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

只要确保左右边距足够大，以便额外的空间可以包含粗体文本。对于较长的单词，可以选择不同的页边距。 这只是另一种解决方法，但为我做了工作。

CSS3解决方案-实验性(假大胆)

想分享一个不同的解决方案，没有人在这里建议。有一个属性叫text-stroke，它会很方便。

P跨度:悬停{ -webkit-text-stroke: 1px黑色; ｝ <p>一些东西，< span>hover this，</span> it's cool</p>

在这里，我针对span标签内的文本，我们用黑色像素描边它，这将模拟该特定文本的粗体样式。

注意，这个属性还没有得到广泛的支持，到目前为止(在写这个答案的时候)，似乎只有Chrome和Firefox支持这个属性。有关浏览器支持文本笔画的更多信息，可以参考CanIUse。

只是为了分享一些额外的东西，你可以使用-webkit-text-stroke-width: 1px;如果你不打算为你的笔画设置颜色。

我喜欢用文本阴影代替。特别是因为您可以使用过渡来动画文本阴影。

你真正需要的是:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

要获得完整的导航，请查看这个jsfiddle: https://jsfiddle.net/831r3yrb/

浏览器支持和更多关于文本阴影的信息: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

你可以用

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

然后在CSS中，将span content设置为粗体，用可见性隐藏它:hidden，这样它就能保持它的维度。然后，您可以调整以下元素的边距，使其适当适合。

我不确定这种方法是否是SEO友好的。