CSS多行文本两端对齐加下划线技巧

本文介绍如何使用CSS实现多行文本两端对齐且带下划线的排版效果。通过巧妙运用`text-decoration`、`border`或`background-image`等属性，特别是结合线性渐变(`linear-gradient`)，可以轻松创建具有可变行数、自定义颜色和间距的下划线。文章将提供具体的CSS代码示例，并详细解释如何调整参数以满足不同设计需求，提升网页美观度和专业性，快速掌握CSS排版技巧。

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

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

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

以下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值，可轻松调整下划线颜色和与文字的间距。

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

到这里，我们也就讲完了《CSS多行文本两端对齐加下划线技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！