下劃線自適應(yīng)寬度 css（Underline Responsive Width CSS）是一種 CSS 技術(shù)，它可以讓下劃線根據(jù)文本內(nèi)容自動調(diào)整寬度。

在過去，網(wǎng)頁設(shè)計師們可能會使用固定寬度的下劃線或背景圖片來生成下劃線效果。這樣做存在一個問題，就是當文本內(nèi)容長度發(fā)生變化時，下劃線的長度也需要手動調(diào)整。這不僅浪費時間，而且顯得笨拙不自然。

現(xiàn)在，我們可以使用下劃線自適應(yīng)寬度 css 技術(shù)來解決這個問題。在 CSS 中，我們可以使用偽類選擇器來對文本添加下劃線。

/* 簡單的下劃線樣式 */
.underline {
text-decoration: none;
position: relative;
}
.underline::after {
content: "";
background-color: #000;
height: 1px;
position: absolute;
left: 0;
bottom: -2px; /* 控制下劃線位置 */
width: 100%; /* 控制下劃線寬度 */
}

在這個示例中，我們使用 ::after 偽類為文本添加下劃線。為了控制下劃線的寬度，我們將其寬度設(shè)置為 100%。這樣下劃線就可以自適應(yīng)文本內(nèi)容的寬度。

此外，我們還可以通過 JavaScript 來動態(tài)修改下劃線的寬度。

/* JavaScript 代碼 */
const underline = document.querySelector(".underline");
const text = document.querySelector(".text");
underline.style.width = text.offsetWidth + "px";

在這個示例中，我們獲取了文本框的寬度并使用它來調(diào)整下劃線的寬度。這樣，無論文本的長度如何變化，下劃線都會保持與之相適應(yīng)的長度。

總之，下劃線自適應(yīng)寬度 css 技術(shù)可以使網(wǎng)頁設(shè)計更加靈活自然。它是一種簡單而有效的技術(shù)，值得大家學(xué)習(xí)掌握。