Adding a custom underline style to element

Question

I am currently adding an svg image to the :after element of the underline selector.

I have it working but it only looks best when the underlined text is a few words long, is there a smarter way to do this so it looks the same when one word or multiple words are underlined?

Thanks, here is the codepen of what I currently have and you can see the difference https://codepen.io/joeincite/pen/rNJOOjE

u,
span[style*="text-decoration: underline;"] {
  width: fit-content;
  text-decoration: none !important;
  position: relative;
}

u:after,
span[style*="text-decoration: underline;"]:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2.5em;
  left: 0;
  width: 100%;
  z-index: 10;
  background-image: url('https://239547.fs1.hubspotusercontent-na1.net/hubfs/239547/Agency%20Webinar%20Web%20Best%20Practice/underline-black.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

h1 {
  font-size: 45px;
}

<section>
  <h1>This is a title with <u>some underlined text</u></h1>
  <h2>This is some more <u>text</u></h2>
</section>