How to create a link with an underline where the underline is cut by letters?

Question

Basically I want a link that has an underline but the tails of the letters cut through it with a small surrounding area of white. Something like this:

Answer 1

There's probably a lot of better ways of doing this, but here's my limited attempt at this:

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

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