CSS 是前端開發必備的技能之一，其中背景下劃線也是常用的樣式之一。下面就來介紹一下怎么實現背景下劃線。

.text {
background-image: linear-gradient(to right, #000000, #000000);
background-position: 0% 110%; /* 下劃線的位置 */
background-repeat: no-repeat;
background-size: 0% 2px; /* 下劃線的大小 */
transition: background-size 0.3s; /* 過渡效果 */
}
.text:hover {
background-size: 100% 2px; /* 鼠標懸浮時下劃線的效果 */
}

如上所示，實現背景下劃線的關鍵在于使用background-image添加線性漸變背景，然后通過background-position控制下劃線的位置，通過background-size控制下劃線的大小，加上過渡效果就能實現一個簡單的下劃線效果。

需要注意的是因為這種方式使用的是背景圖（背景本身并不是文字下面的線），如果文字寬度改變，下劃線的長度也需要動態改變。

這樣就能方便地實現一個簡單的背景下劃線了。