如何通过CSS实现多行文本的两端对齐下划线？

css技巧：优雅实现多行文本两端对齐下划线

在CSS中，为多行文本创建两端对齐的下划线并非易事，尤其当文本行数不固定，且需要自定义下划线颜色及文字间距时。本文将介绍一种巧妙的CSS方法，利用背景渐变轻松解决这一难题。

此方法的核心在于使用background-image属性和线性渐变(linear-gradient)。通过渐变，我们可以精确控制下划线的颜色和与文本的距离，并完美适应不同行数的文本。

以下是一个stylus示例，演示如何实现该效果：

div   line-height 25px   font-size 14px   text-indent 28px // 等于font-size * 2   background linear-gradient(to bottom, white 99%, black 100%)   background-size 100% 25px // 25px 等于 line-height

代码解释：

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

• line-height和font-size设置文本的行高和字体大小。
• text-indent设置文本缩进，确保下划线与文本对齐。
• linear-gradient(to bottom, white 99%, black 100%) 创建一个从白色到黑色的垂直渐变，下划线为黑色，并与文字底部紧密贴合。
• background-size 设置背景图像大小，使其与每行文本高度一致。

通过此方法，您可以轻松创建多行文本的两端对齐下划线效果，并灵活调整下划线颜色和间距，适用于各种应用场景。 该方法简洁高效，避免了繁琐的JavaScript操作。