CSS текст перекрывают нижнюю границу

Question

Я уже некоторое время занимаюсь этим, но, похоже, не могу получить правильный эффект.

Я бы хотел, чтобы m H1 перекрывал нижнюю границу под ним.Мало того, что его нужно будет оборачивать при просмотре на меньшем устройстве.

Я добавил ссылку на изображение эффекта, которого я пытаюсь достичь, а также показываю, как мне это нужно обернуть.

Пример изображения того, что мне нужно сделать:

Самое близкое, что я пришел, это использовать:

 box-shadow: inset 0 -0.1em red;

Но это находится прямо в нижней части заголовка, и мне нужен, например, хвост буквы 'g', чтобы перекрыть его.

h1 {
  color: #000;
  font-size: 13rem;
  line-height: 1.1;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 0.5em 0;
  padding: 0 2%;
  letter-spacing: -0.75rem;
}

h1 span.stroke-pink {
  box-shadow: inset 0 -0.1em #fc1561;
}

<h1><span class="stroke-pink">Our unique culture.</span></h1>

Спасибо

Answer 1

Вы можете сделать это с помощью linear-gradient и легко контролировать положение / размер:

h1 {
   color: #000;
  font-size: 35px;
  max-width:200px;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 0.5em 0;
}

.stroke-pink {
  background-image:linear-gradient(pink,pink);
  background-position:0 100%;
  background-size:100% 5px; 
  background-repeat:no-repeat;
  
  animation:change 1s infinite linear alternate;
}

@keyframes change {
  from {background-position:0 100%;}
  to {background-position:0 80%;}
 }

<h1><span class="stroke-pink">Our unique culture.</span></h1>