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

I wouldn't break text for SEO reasons, so I prefer to replace the underline with a fake one. CSS calc can help you with its width.

a{
  text-decoration:none;
  letter-spacing:15px;
  color:red;
  display:inline-block;
}

a .underline{
  height:2px;
  background-color:red;
  width: calc(100% - 15px); /*minus letter spacing*/
}

Text