在設計網頁文字時，會需要在文字加上「底線」來強調重點，但一般的 text-decoration: underline; 有一個限制 —— 在具有多行文字時，在最後一行文字的底線無法填滿整行文字段落，而是只能文字尾端，看起來不夠美觀。
這篇文章要教你用一小段 CSS，製作出更「優雅」的多行底線效果 ✨
🔹 一般底線（基本用法）
text-decoration: underline;
text-underline-offset: 10px;
text-decoration-color: #CCCCCC;
text-decoration-thickness: 2px;
這組設定能調整底線與文字的距離、顏色、粗細，不過只會在文字本身下方畫線，不會隨著文字換行時延伸到底部。效果如下：
🔹 另一種做法：使用 background-image 模擬底線
想要「每一行文字都具有完整底線」的效果，可以使用 background-image 製作重複的底線圖層。
line-height: 1.8;
background-image:
repeating-linear-gradient(
transparent,
transparent calc(1.8em - 2px),
pink calc(1.8em - 2px),
pink 1.8em
/* 1.8em對應於文字的行高設定，2px則為底線的高度*/
);
background-size: 100% 1.8em;
/* 設定每一行的高度 */
padding-bottom: 2px;
/* 透過padding預留空間給底線 */
這段語法的原理是：
- 使用 線性漸層 (
linear-gradient) 畫出一條粉紅色底線； transparent代表空白區；calc(1.8em - 2px)控制底線與文字行距；background-size設定每一行的高度；repeating-linear-gradient讓線條自動重複，形成「多行底線」的效果。
效果如下：
💡 延伸應用：
- 可以改變顏色以及底線高度來做出螢光筆風格 (
background-color淡黃色) - 或配合文字的行高來調整
background-size以控制底線之間的距離 - 也可以結合動畫，讓底線緩慢出現，作為強調效果
以上為關於文字底線的介紹，感謝收看。
