If your styles include an underline or bottom border to text that includes letter spacing, you will see that the underline or bottom border extends beyond the last letter. This is because the letter-spacing property adds white space after each letter. This additional white space is part of the letter causing the extended underline.
Typical workarounds to remove this extended bit is to mask it with an ::after pseudo element. The problem with this approach is that you have to explicitly specify the background color to whatever the background color is behind your element.
A solution to remove this extended bit, independent of the element’s background color, is to use the clip-path property on the element itself.
a{
clip-path: inset(0 .3em 0 0);
letter-spacing: .3em;
text-decoration: underline;
}The key is to set the second value of the inset to the same value as the letter-spacing.
I posted this solution on Stack Overflow. Vote it up if you find it useful.