如何通過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值，可輕松調整下劃線顏色和與文字的間距。

立即學習“前端免費學習筆記（深入）”；

此方法可靈活應對多行文本，并提供高度的可定制性，滿足各種設計需求。