如何通過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操作。