如何实现伪元素背景图在全尺寸下匹配H1文本宽度作为标题底衬

需求：背景图需在所有屏幕尺寸下始终与H1文本宽度一致；当文本换行时，背景图最大宽度需匹配H1文本宽度。
当前问题：文本过长换行时，背景图宽度不符合预期。

问题原因 #

原代码中<span class="stroke">是行内元素，设置position: relative后，伪元素::after的width: 100%是相对于父元素<h1>的默认满容器宽度，而非文本实际占据的宽度，导致换行时背景图宽度与文本不匹配。

解决方案 #

通过调整<span>的显示属性，让它的宽度匹配文本内容，再让伪元素的宽度继承这个宽度，具体修改如下：

修改后的CSS代码

h1 {
  font-size: 20px;
  /* 可选：让h1宽度适配文本，避免占据整个容器宽度 */
  width: fit-content;
}

span.stroke {
  position: relative;
  display: inline-block; /* 关键：使span宽度匹配文本实际宽度 */
}

span.stroke::after {
  content: "";
  background: pink; /* 替换为实际背景图，示例用纯色 */
  height: 10px;
  width: 100%;
  display: block;
  bottom: 0;
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 确保背景图完全覆盖伪元素区域 */
}

修改后的HTML代码

<div>
  <h1>
    <span class="stroke">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
  </h1>
</div>

说明 #

• display: inline-block让<span>的宽度由文本内容决定，即文本最宽行的宽度，伪元素的width: 100%会继承这个宽度，实现背景图与文本宽度一致。
• 可选的width: fit-content给<h1>，可以让标题本身的宽度也适配文本，避免占据不必要的容器宽度。

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