CSS Text underlining too long when letter-spacing is applied?

Question

Whenever letter-spacing is applied to something with an underline or a bottom border, it seems like the underline extends beyond the text on the right. Is

Answer 1

You can also use an absolute positioned pseudo element to achieve the underline, and counter the offset by specifying its with using the left and right property. Click below for an example.

<span style="letter-spacing: 5px; position: relative">My underlined text</span>

span:after {
    content: '';
    border-bottom:1px solid #000;
    display: block;
    position: absolute;
    right: 5px;
    left: 0;
}

https://codepen.io/orangehaze/pen/opdMoO