另一种方法是通过文本阴影“模拟”粗体文本。这有一个额外的好处(/malus，取决于你的情况)，也适用于字体图标。

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

有点俗气，尽管它可以避免重复文本(如果文本很多，这很有用，就像我的情况一样)。

如果您不能设置宽度，那么这意味着宽度将随着文本变得粗体而改变。除了修改每个状态的填充/边距之类的妥协，没有办法避免这种情况。

这个呢?一个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>

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

这是我喜欢的解决办法。它需要一些JS，但你不需要你的标题属性完全相同，你的CSS可以保持非常简单。

$('ul a').each(function() { $(this).css({ 'padding-left': 0, 'padding-right': 0, 'width': $(this).outerWidth() }); }); li, a { display: inline-block; } a { padding-left: 10px; padding-right: 10px; text-align: center; /* optional, smoother */ } a:hover { font-weight: bold; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul>

最好使用a::before而不是a::after，就像这样:

.breadcrumb { margin: 0; padding: 0; list-style: none; overflow: hidden; } .breadcrumb li, .breadcrumb li a { display: inline-block; } .breadcrumb li:not(:last-child)::after { content: '>'; /* or anything else */ display: inline-block; } .breadcrumb a:hover { font-weight: bold; } .breadcrumb a::before { display: block; content: attr(data-label); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } <ul class="breadcrumb"> <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li> <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li> <li><a data-label="three" href="#">three</a></li> </ul>

详情请访问:https://jsfiddle.net/r25foavy/