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

.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; /* 鼠標(biāo)懸浮時(shí)下劃線的效果 */
}

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

需要注意的是因?yàn)檫@種方式使用的是背景圖（背景本身并不是文字下面的線），如果文字寬度改變，下劃線的長度也需要?jiǎng)討B(tài)改變。

這樣就能方便地實(shí)現(xiàn)一個(gè)簡單的背景下劃線了。