Increase spacing of text link underline when added as hover

Hoping someone can help with this. I've added the below CSS to display an underline when text links are hovered over

/* End Insert Code for Mobile*/
}
h1 a, h2 a, h3 a, p a {
  text-decoration: none !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
  text-decoration:underline !important;
}

I want to increase the spacing between the bottom of the text and underline so that the line isn't cut off by the low-hanging letters. Anyone have any thoughts?

Site is: https://celery-helicon-5yx8.squarespace.com/ (no password)

Use CSS border, you can control space

h1 a:hover, h2 a:hover, h3 a:hover, p a:hover {
    border-bottom: 2px solid black;
    padding-bottom: 5px;
}