Underline extends beyond end of word with letter-spacing

Question

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?

Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved. Posting a [Short, Self Contained, Correct Example (SSCCE)](http://www.sscce.org/) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! — j08691, Dec 03 '13 at 16:30
possible duplicate of [CSS Text underlining too long when letter-spacing is applied?](http://stackoverflow.com/questions/4015263/css-text-underlining-too-long-when-letter-spacing-is-applied) — Wagner Leonardi, Dec 03 '13 at 16:33
Thanks for the links. I have updated the question to provide more information on my specific problem and avoided linking to external sites. — oldo.nicho, Dec 04 '13 at 15:33

score 1 · Answer 1 · edited Feb 13 '14 at 20:45

1

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>

edited Feb 13 '14 at 20:45

user1015711

134
1
17

answered Dec 03 '13 at 16:37

APAD1

13,509
8
43
72

Thanks for your suggestion however that doesn't quite solve my problem. I have updated the question to provide more information. – oldo.nicho Dec 04 '13 at 15:36
The easiest thing to do would be to make your menu static instead of dynamic and then just use this solution. Unless you're planning on changing your menu items a lot, it wouldn't be that big of a deal. – APAD1 Dec 04 '13 at 15:45
That is a good idea, however I want to get the site up and running and looking sharp and then hand over to my client so that they can take care of updating and modifying the content if required. – oldo.nicho Dec 04 '13 at 15:52

score 0 · Answer 2 · edited May 23 '17 at 12:19

0

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.

edited May 23 '17 at 12:19

Community

1
1

answered Dec 03 '13 at 16:35

Wagner Leonardi

4,226
2
35
41

Thanks. Yes, I had seen that question and the responses, but my problem is slightly different. I have updated the question to provide more information. – oldo.nicho Dec 04 '13 at 15:35

score 0 · Answer 3 · edited Dec 03 '13 at 17:10

0

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

edited Dec 03 '13 at 17:10

legoscia

39,593
22
116
167

answered Dec 03 '13 at 16:51

CROSS

1
1

Underline extends beyond end of word with letter-spacing

3 Answers3