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值，可轻松调整下划线颜色和与文字的间距。
立即学习“前端免费学习笔记（深入）”；
此方法可灵活应对多行文本，并提供高度的可定制性，满足各种设计需求。
