如何创建带有下划线的链接，其中下划线被字母切割？ [复制]

Question

基本上我想要一个有下划线的链接，但字母的尾部会穿过它，周围有一小块白色。 像这样的：

Answer 1

可能有很多更好的方法可以做到这一点，但这是我在这方面的有限尝试：

h1 {
  display: inline-block;
  font-size: 60px;
}
h1 span {
  text-decoration: underline;
}

<h1>
  <span>Ja</span>y<span> Reatard</span>
</h1>