最好使用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/

你可以用

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

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

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

我可以给你两种建议

第一个选项:是将每个列表项的宽度设置为%

这里有一个简单的例子

<ul>
  <li><a href="#">First Item</a></li>
  <li><a href="#">Second Item</a></li>
  <li><a href="#">Third Item</a></li>
  <li><a href="#">Fourth Item</a></li>
</ul>

li {
  list-style-type: none;
  display: inline-block;
  width: 24%;
}

a {
  text-decoration: none;
  color: #333;
  font-size: 1.4em;
  background: #A5C77F;
  display: block;
  padding: 10px 15px;
  margin: 10px 0;
  border-right: 1px solid whitesmoke;
  transition: font-weight .3s;
}

a:hover {
  font-weight: bold;   
}

第二种选择:在活动元素上使用文本阴影

text-shadow: 0 0 .65px #333, 0 0 .65px #333;

但我建议使用第一个选项，即为每个元素指定一个百分比的宽度，因为文本阴影并不总是在移动浏览器中工作

我固定菜单时，悬停粗体成功。它支持响应式，这是我的代码:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

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

使用字母间距和文本阴影:

a {
  letter-spacing: .1em;
}

a:hover {
  text-shadow: 0 0 .9px #color, 0 0 .9px #color, 0 0 .9px #color;
}