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?