備受關(guān)注的 CSS 下劃線效果，一直在各大網(wǎng)站首頁、產(chǎn)品推廣、廣告宣傳中被廣泛使用。在互聯(lián)網(wǎng)領(lǐng)域，時尚的下劃線動態(tài)效果給用戶留下深刻的印象，使網(wǎng)頁設(shè)計更加精彩，使用 CSS 實現(xiàn)下劃線效果需要的代碼是相對簡單的。

text-decoration: none;
border-bottom: 2px solid #f44336;
transition: border-bottom .3s ease-in-out;
.hover-underline:hover {
border-bottom: 2px solid #4CAF50;
}

上述代碼使用了text-decoration屬性來去除默認的下劃線，利用border-bottom屬性來通過添加下邊框來自定義下劃線，在懸停時通過 CSS 的:hover偽類來修改下劃線樣式。這種簡單但有效的代碼可以隨著內(nèi)容的變化而變化，不管是段落、標(biāo)題、按鈕文字、鏈接等，都可以通過相應(yīng)的 CSS 選擇器實現(xiàn)動態(tài)下劃線效果。

下面是一個使用 CSS 下劃線隨標(biāo)題長度改變的例子：

h1 {
position: relative;
font-size: 3rem;
text-transform: uppercase;
}
h1::after {
content: '';
position: absolute;
bottom: -.2rem;
left: 0;
z-index: -1;
height: .4rem;
width: 100%;
background-color: #f443361f;
transition: transform .25s ease-in-out;
}
h1:hover::after {
transform: scaleX(1);
}
@media (min-width: 768px) {
	h1 {
font-size: 4rem;
	}
}
@media (min-width: 1024px) {
	h1 {
font-size: 5rem;
	}
}

上述代碼通過偽類::after為標(biāo)題添加下劃線，并通過transform: scaleX(1)改變下劃線長度，實現(xiàn)了下劃線隨標(biāo)題長度動態(tài)改變的效果。同時，通過媒體查詢在不同的屏幕尺寸下改變標(biāo)題字體大小，使下劃線效果更加完美。

CSS 下劃線是實現(xiàn)動態(tài)效果的一個很好的方法，不管是網(wǎng)頁中的標(biāo)題、段落、按鈕等，都可以通過 CSS 下劃線隨內(nèi)容改變的效果來提高用戶體驗和頁面視覺效果。在實際開發(fā)中，還可以根據(jù)不同的場景和需求來自定義下劃線效果，例如改變下劃線顏色、樣式、粗細等，來滿足不同的設(shè)計要求。