Have you ever tried to use underline or bottom margin as rollover / :hover effect on text? Thats quite easy isn’t it? NOT when letter-spacing applied to that text!

Talking about this beast below:

After hours of research turned out there is a few possible solution for different situations. For example wrap the last character and apply letter-spacing: 0;

<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>

Pretty simple, of course doesnt worked for me, is i had to apply to dynamic elements (WordPress Navigation).

Saw lovely other solutions around the web, which are trying to hide the addition space with :before / :after pseudo elements applying a piece of abosolutely positioned, same as bakground coloured element…. Yes, what a Hack! Have to admint it could work …. of course im always getting in particular situations where it WAS NOT WORKED, as i had moving background under the Navigation elements. .. this means another solution forgotten.

Almost gave up, but a dissatisfied, quality-minded Graphic Designer could be really pushy. So as last resort got Javascript to the rescue! (as most of the time).

Let me introduce:
http://letteringjs.com/
https://github.com/davatron5000/Lettering.js

After applying a specific class to the desired elements (could be anything), just simply call the previously included script:

  $(document).ready(function() {
    $(".lettering").lettering();
  });

The resulting code will churn your .fancy_title and output the following:

<h1 class="lettering"><span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span></h1>

Magical! Now the text is easy to manipulate in your CSS using an ordinal .char# pattern. This plugin assumes basic counting skills, but it’s a pretty fast and easy way to get control over every letter.

So simply removing the letter-spacing only from the last character is epic!

.lettering {
	span:last-child {
		letter-spacing: 0;
	}
}

There you have it, but Lettering.js does even more! Lettering.js has the ability to split words and lines as well. If you want more information on how you can get radical with text, read the Lettering.js Wiki:

https://github.com/davatron5000/Lettering.js/wiki

Hope this helps on fellas suffering from the same symptom!