CSS打造多行文本两端对齐下划线效果

网页排版中，为多行文本添加两端对齐的下划线，能显著提升页面美观度和专业性。本文将介绍如何利用CSS实现此效果，并支持可变行数、自定义颜色和间距。

我们可运用text-decoration、border或background-image等CSS属性。 其中，background-image结合线性渐变，是实现该效果的有效方法。

以下CSS代码演示了如何使用线性渐变创建下划线：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

div {
  line-height: 25px;
  font-size: 14px;
  text-indent: 28px; /* 等于 2 * font-size */
  background: linear-gradient(to bottom, white 24px, black 24px); /*调整24px控制下划线粗细和位置*/
  background-size: 100% 25px; /* 25px 与 line-height 保持一致 */
  background-repeat: repeat-y; /* 确保下划线在多行文本中重复 */
}

代码首先设置行高和字体大小。text-indent属性调整文本缩进，确保下划线与文本对齐。linear-gradient创建从白色到黑色的线性渐变，形成下划线效果。background-size和background-repeat属性控制渐变背景的尺寸和重复方式，使其适应多行文本。 通过修改渐变颜色和line-height值，可轻松调整下划线颜色和与文字的间距。

立即学习“前端免费学习笔记（深入）”；

此方法可灵活应对多行文本，并提供高度的可定制性，满足各种设计需求。