如何用CSS实现符合设计稿要求的文本下划线效果

嘿，我太懂你这种头疼的感觉了——用原生的text-decoration确实搞不定每一行下划线都超出文本两端的需求，尤其是当文本从CMS动态加载、换行完全不受控制的时候。别慌，咱们换个思路，不用text-decoration，改用背景渐变来模拟下划线，就能完美实现你要的效果，还能适配响应式布局！

核心思路 #

原生下划线是紧贴文本边缘的，没法直接给每一行加前后的延伸空间。但用linear-gradient生成的背景可以通过box-decoration-break: clone让每一行文本都独立渲染背景，再配合左右内边距，就能轻松让下划线超出文本两端。

完整代码实现 #

先看HTML结构（不用改你的原有结构）：

<div>
  <p>Lorem ipsum dolor amet</p>
</div>

然后是调整后的CSS：

div {
  background:#09333c;
  padding: 2rem;
  max-width: 275px;
}

p {
  color: white;
  font-size: xx-large;
  font-weight: bold;
  text-align: center;
  /* 用线性渐变创建下划线的颜色块 */
  background: linear-gradient(#20a9b3, #20a9b3) no-repeat;
  /* 控制下划线的粗细：第二个值是厚度 */
  background-size: 100% 0.3em;
  /* 控制下划线的垂直位置：第二个值是距离顶部的百分比，按需调整 */
  background-position: 0 90%;
  /* 关键属性：让多行文本的每一行都单独渲染背景 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容Chrome、Safari等webkit内核浏览器 */
  /* 左右内边距：让下划线超出文本两端的长度，按需调整 */
  padding: 0 0.5em;
  margin: 0; /* 去掉默认margin避免和父容器的padding冲突 */
}

关键属性解释 #

• linear-gradient：生成和你需求颜色一致的背景条，作为下划线。
• background-size：第一个值控制宽度（100%就是和文本行等宽），第二个值控制下划线的粗细。
• background-position：调整第二个百分比值，就能改变下划线相对于文本的垂直位置，比如改成85%会更靠上，95%更靠下。
• box-decoration-break: clone：这是实现多行文本每一行都有独立下划线的核心，没有它的话，背景只会在整个文本块的底部渲染一次。
• padding: 0 0.5em：给文本左右加内边距，让背景（也就是下划线）自然超出文本两端，这个值你可以根据设计稿的要求调整大小。

响应式适配 #

因为我们用的都是相对单位（em），所以当屏幕尺寸变化、字体大小自适应时，下划线的粗细、超出长度都会跟着自动调整，完全不用额外写媒体查询，完美适配响应式布局。

内容来源于stack exchange