如何实现H1文本重叠底部边框并支持响应式换行？

你的需求核心是让文本的下伸部分（如字母g的尾巴）能够覆盖底部边框，同时保证小屏幕下文本可以正常换行。之前用box-shadow: inset 0 -0.1em #fc1561的问题在于，阴影是基于元素边界生成的，而非文字基线，导致边框太贴近文字底部，下伸部分被“压”在边框下方。

我们可以通过伪元素+层级控制来实现理想效果，具体思路如下：

• 用span.stroke-pink的伪元素::after创建底部边框，将其层级设为低于文本，让文本（包括下伸部分）自然覆盖在边框之上
• 基于文字基线位置调整伪元素的垂直距离，避免边框紧贴文字主体
• 保留原有响应式设置，确保小屏幕下文本自动换行

完整代码示例 #

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 {
  position: relative; /* 为伪元素提供定位参考 */
  display: inline; /* 确保文本自然换行 */
}

h1 span.stroke-pink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1em; /* 微调这个值，控制边框与文字的距离，让下伸部分能覆盖 */
  height: 0.1em; /* 边框厚度，和你原来的box-shadow设置一致 */
  background-color: #fc1561;
  z-index: -1; /* 把边框放在文本下方 */
}

/* 小屏幕响应式优化：缩小字体，保证换行流畅 */
@media (max-width: 768px) {
  h1 {
    font-size: 5rem;
    letter-spacing: -0.2rem;
  }
}

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

关键细节说明 #

• position: relative为伪元素提供定位基准，inline确保span随文本自然换行，不会破坏响应式布局
• bottom: 0.1em是核心调整项：你可以根据字体实际的下伸长度微调这个值，让边框刚好落在文字主体下方，同时让下伸部分完全覆盖边框
• z-index: -1确保边框始终在文本下方，无论字母下伸部分延伸多长
• 新增的媒体查询是为了优化小屏幕体验，你可以根据实际需求调整断点和字体大小

内容的提问来源于stack exchange，提问作者Jools