CSS3提供了許多樣式的新增功能，其中之一就是自定義下滑線。

text-decoration:none;
border-bottom:2px solid #f00;

上述代碼可以將文字下方的下滑線改為紅色的實(shí)心線。

如果想要更改下滑線的樣式，可以使用CSS3的偽類選擇器：:after

text-decoration:none;
position:relative;
&:after{
content:"";
position:absolute;
bottom:0;
left:0;
height:2px;
width:100%;
background-color:#f00;
}

上面的代碼中，使用了Sass的語法&表示當(dāng)前元素，偽類選擇器:after在元素的下方增加一個(gè)塊狀元素，用來作為下滑線。bottom:0和left:0表示下方和左邊距離為0，height:2px用來設(shè)置下劃線的高度。

除此之外，我們還可以使用線性漸變來讓下滑線更加豐富多彩。

text-decoration:none;
background:linear-gradient(to right, #f00 50%, transparent 50%);
background-size:100% 5px;
background-position:0 95%;
background-repeat:no-repeat;

上方代碼中，利用了線性漸變把下劃線分成了兩個(gè)部分，前半部分為紅色，后半部分為透明。利用background-size和background-position設(shè)置下滑線的位置和大小。

總而言之，CSS3的自定義下滑線功能提供了很多樣式和選擇器來豐富下滑線的樣式，可以讓我們的網(wǎng)頁更加美觀和有趣。