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

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

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