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>

试试这个:

.nav {
  font-family: monospace;
}

另一个想法是使用字母间距

Li, a{显示:inline-block;｝ 一个{ 字体大小:14 px; padding-left: 10 px; padding-right: 10 px; 字母间距:0.235 px ｝ A:悬停，A:焦点{ 粗细:大胆的; 字母间距:0 ｝ < ul > <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> < / ul >

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;如果你不打算为你的笔画设置颜色。

我建议不要在hover时切换字体(°)。在这种情况下，只是菜单项移动了一点，但我曾见过由于扩大导致额外的换行导致整个段落重新格式化的情况。你不希望看到这种情况发生时，你所做的唯一的事情是移动光标;如果你什么都不做，页面布局应该不会改变。

在正常和斜体之间切换时也会发生偏移。我会尝试改变颜色，或者切换下划线，如果你有文字下面的空间。(下划线应该远离底部边框)

如果我在窗体设计课上使用切换字体，我会被嘘的:-)

字体这个词经常被误用。“Verdana”是一种字体，“Verdana normal”和“Verdana bold”是同一字体的不同字体。

不是很优雅的解决方案，但“有效”:

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}