Css文本重叠底部边框

Question

我已经有一段时间了，但似乎无法获得正确的效果。

我希望H1与它下方的底部边框重叠。不仅在小型设备上查看时需要换行。

我已经添加了一个链接到我想要实现的效果的图像，并且还显示了我需要它如何包装。

我需要做的图片示例：

我最接近的是使用：

 box-shadow: inset 0 -0.1em red;

但是它位于标题的底部，我需要例如“g＆＃39;”的尾部。重叠它。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

由于

Answer 1

您可以使用linear-gradient执行此操作并轻松控制位置/尺寸：

＆＃13;

＆＃13;

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%;}
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;