如何实现标题文本至容器末尾划线？多行标题适配问题

给你两个可行的方案，能完美适配单行/多行标题的下划线需求：

方案一：Grid布局（推荐，无需额外HTML标签） #

利用Grid的列分配特性，让标题文本占自动宽度，下划线占剩余容器宽度，无需修改HTML结构：

h1 {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end; /* 让下划线与文本底部对齐 */
  gap: 0.5em; /* 文本与下划线之间的空隙，可根据需求调整 */
}

h1::after {
  content: "";
  border-bottom: 3px solid #08A7FC;
}

这个方案不管标题是单行还是换行成多行，下划线都会紧贴文本右侧（与最后一行文本底部对齐），一直延伸到容器末尾。

方案二：Flex + 内联块容器 #

如果更偏好Flex布局，只需给标题文本包裹一层span，通过内联块限制文本容器宽度，让Flex的伪元素占据剩余空间：

h1 {
  display: flex;
  align-items: end;
  gap: 0.5em;
}

h1 span {
  display: inline-block; /* 包裹多行文本，宽度由内容决定 */
}

h1::after {
  content: "";
  flex: 1;
  border-bottom: 3px solid #08A7FC;
}

使用时需要修改HTML结构：

<h1><span>这是一段会换行的长标题文本，测试下划线是否能正确延伸至容器末尾</span></h1>

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