下划线延伸到单词的结尾，字母间距[关闭]

I am developing a WordPress site and have increased the letter-spacing on the sites navigation bar by adding letter-spacing: 4px; to the sites #mainNav ID located within the themes style.css file. I have also added text-decoration: underline; to the same style.css file under the following classes so that the currently viewed page will be underlined in the navigation bar:

#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;
}

The problem is that because of the increased letter-spacing the underline projects beyond the end of the word.

I have seen the answers to CSS Text underlining too long when letter-spacing applied, but because the navigation bar is being pulled together by PHP it is not so easy as modifying the html for a static page, as is proposed in the answers.

The navigation bar in WordPress is constructed via the files nav-menu-template.php and nav-menu.php in the wp-includes folder. Could someone please provide assistance in how I may be able to implement some PHP into the navigation bar PHP so that it will automatically apply the letter-spacing to all letters minus the last?

Duplicated question: CSS Text underlining too long when letter-spacing is applied?

That is the normal behaviour of letter-spacing, to accomplish what you want you need to remove the letter-spacing from the last character, check the correct solution of question above to more details.

The problem is that letter-spacing adds white space to the end of each letter, including the last one. One thing you can do is create a span class with the letter-spacing property and then wrap each of the menu items in the span, except for the last letter.

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

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