在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
代码解释：
立即学习“前端免费学习笔记（深入）”；
通过此方法，您可以轻松创建多行文本的两端对齐下划线效果，并灵活调整下划线颜色和间距，适用于各种应用场景。 该方法简洁高效，避免了繁琐的JavaScript操作。
以上就是如何通过CSS实现多行文本的两端对齐下划线？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1000
收藏
