PHP fix for CSS letter-spacing making text underline/border too wide

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.