如何创建一个下划线用字母切割下划线的链接？

Question

基本上我想要一个带下划线的链接，但字母的尾部用一个小的周围白色区域切开。 像这样：

Answer 1

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

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

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