下划线以字母间距超出单词结尾[关闭]

Question

我正在开发一个 WordPress 站点，并通过将 letter-spacing: 4px; 添加到位于主题 style.css 文件中的站点 #mainNav ID 来增加站点导航栏上的字母间距。我还在以下类下的同一个 style.css 文件中添加了text-decoration: underline;，以便当前查看的页面将在导航栏中加下划线：

#mainNav ul li.current a,
#mainNav ul li.current-cat a,
#mainNav ul li.current_page_item a,
#mainNav ul li.current-menu-item a,
#mainNav ul li.current-post-ancestor a,
.single-post #mainNav ul li.current_page_parent a,
#mainNav ul li.current-category-parent a,
#mainNav ul li.current-category-ancestor a,
#mainNav ul li.current-portfolio-ancestor a,
#mainNav ul li.current-projects-ancestor a {
    color: #2e2e2e;
    text-decoration: underline;
}

问题在于，由于增加了字母间距，下划线超出了词尾。

我已经看到了CSS Text underlining too long when letter-spacing applied 的答案，但是因为导航栏是由 PHP 拉到一起的，所以不像在答案中建议的那样修改静态页面的 html 那么容易。

WordPress 中的导航栏是通过 wp-includes 文件夹中的文件 nav-menu-template.php 和 nav-menu.php 构建的。有人可以帮助我如何在导航栏 PHP 中实现一些 PHP，以便它会自动将字母间距应用于所有字母减去最后一个？

Answer 1

问题在于字母间距会在每个字母的末尾添加空格，包括最后一个。您可以做的一件事是使用 letter-spacing 属性创建一个 span 类，然后将每个菜单项包装在 span 中，最后一个字母除外。

<span class="spacing">Home</span>
<span class="spacing">Links</span>

Answer 2

重复问题：CSS Text underlining too long when letter-spacing is applied?

这是letter-spacing 的正常行为，要完成您需要从最后一个字符中删除letter-spacing 的操作，请查看上述问题的正确解决方案以了解更多详细信息。

Answer 3

a {
  display: inline-block;
  width: 70px /*your a's original width is 72px*/;
  overflow: hidden;
}