Can I offset an underline to the right and shorten the length?

Question

I'm trying to add a stylised underline to a title where it starts just after the g. See image for what I mean.

I've tried everything I can think of and scoured the internet for an answer but no luck so far.

This is how I have it now

This is how it needs to be

This is what I've got so far:

<h1>get your meow on</h1>

.App-header h1 {
  color: #394CED;
  font-size: 33px;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 2%;
  text-decoration-color: #00D8D6;
  text-decoration-thickness: 4px;
  text-decoration-skip-ink: none;
  font-weight: 600;
  padding-bottom: 10px;
}

I can't just do change skip ink as I need it to pass under the Y.

Answer 1

You may need to wrap the whole text inside a span and apply all the text decorations to it, and separate the first letter from that span like this :

span {
  text-decoration: underline;
  text-underline-offset: 2%;
  text-decoration-color: #00D8D6;
  text-decoration-thickness: 4px;
  text-decoration-skip-ink: none;
  
}
h1{
  color: #394CED;
  font-size: 33px;
  font-weight: bold;
  font-weight: 600;
  padding-bottom: 10px;
}

<h1>g<span>et your meow on</span></h1>

Answer 2

It can be done with a pseudo element. Here's an example where the underline is positioned manually.

h1 {
  color: #394CED;
  font-size: 33px;
  font-weight: bold;
  /* text-decoration: underline;
  text-underline-offset: 2%;
  text-decoration-color: #00D8D6;
  text-decoration-thickness: 4px;
  text-decoration-skip-ink: none; */
  font-weight: 600;
  padding-bottom: 10px;
  position: relative;
}

h1::after {
  content: "";
  height: 4px;
  width: 230px;
  display: inline-block;
  background-color: #00D8D5;
  position: absolute;
  top: 32px;
  left: 20px;
z-index: -1;
}

<h1>get your meow on</h1>

Answer 3

You can target just the first letter with CSS to turn on the skip ink, by adding to your existing style:

h1::first-letter {text-decoration-skip-ink: auto;}