備受關注的 CSS 下劃線效果，一直在各大網站首頁、產品推廣、廣告宣傳中被廣泛使用。在互聯網領域，時尚的下劃線動態效果給用戶留下深刻的印象，使網頁設計更加精彩，使用 CSS 實現下劃線效果需要的代碼是相對簡單的。

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偽類來修改下劃線樣式。這種簡單但有效的代碼可以隨著內容的變化而變化，不管是段落、標題、按鈕文字、鏈接等，都可以通過相應的 CSS 選擇器實現動態下劃線效果。

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

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為標題添加下劃線，并通過transform: scaleX(1)改變下劃線長度，實現了下劃線隨標題長度動態改變的效果。同時，通過媒體查詢在不同的屏幕尺寸下改變標題字體大小，使下劃線效果更加完美。

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