Search the blog

If you’ve ever adjusted the letter-spacing on a link and applied text-decoration or border you’ll have noticed that the line seems too long. It’s not really too long, it’s that letter-spacing is added on a per-letter basis after each letter. What you want is for the last letter to have 0 letter-spacing.

You’d think this would be easier enough to achieve with a CSS selector but alas the best available is first-letter.

I looked at some JavaScript/jQuery ways but found them a bit messy and convoluted. It’s very easy to do with PHP, however:

// $letterSpacingString is whatever holds the string with the letter-spacing problem

$chars        = str_split($letterSpacingString);
$outputString = '';
$charCounter  = 1;

foreach($chars as $char) {

    if($charCounter === count($chars)) {

        $outputString .= '<span style="letter-spacing: 0px;">' . htmlspecialchars($char) . '</span>';

    else {

        $outputString .= htmlspecialchars($char);


    $charCounter ++;


// $outputString now has what you want

Of course you don’t need to use you can add a CSS class here instead.

Maybe eventually this will be possible with pure CSS — and yes, it definitely can be done with JavaScript. But for me, for now, this is my preferred method.

Tim Bennett is a web designer and developer. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.