<分区>
我正在开发一个 WordPress 网站，并通过将 letter-spacing: 4px; 添加到网站 #mainNav ID 来增加网站导航栏上的字母间距在主题 style.css 文件中。我还在以下类下的同一 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 中，以便它会自动将字母间距应用于减去最后一个字母的所有字母吗？
最佳答案
问题是 letter-spacing 在每个字母的末尾添加了空格，包括最后一个。您可以做的一件事是创建一个具有 letter-spacing 属性的 span 类，然后将每个菜单项包装在 span 中，最后一个字母除外。
<span class="spacing">Home</span>
<span class="spacing">Links</span>
关于php - 下划线以字母间距延伸到词尾之外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20356462/