CSS下劃線樣式彎曲：

.text-underline {
position: relative;
text-decoration: none;
}
.text-underline::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #000;
transform: skewY(-10deg);
}
.text-underline:hover::before {
height: 4px;
transform: skewY(-10deg) translateY(-2px);
}

在HTML中，我們經常需要使用下劃線來強調一些重要的文字內容。而傳統的下劃線樣式往往比較單調，缺乏創意和個性化。那么怎樣才能讓下劃線樣式更加炫酷和時尚呢？這時候就需要使用CSS來實現了。

上面的代碼是實現CSS下劃線彎曲效果的代碼。其中，我們首先定義一個class類名為"text-underline"，用于針對需要添加該下劃線效果的文本元素。在CSS中，我們需要將該元素的text-decoration屬性設置為none，以便隱藏掉默認下劃線效果。

接下來，我們使用偽元素:before來創建一個橫向下滑線。通過設置該元素的position屬性為absolute，并設置left和bottom值為0，則可以讓該元素位于文本元素的底部。同時，我們還需要設置該元素的width為100%，以保證下劃線覆蓋整個文本內容。height值為2px，background-color為黑色，用于設置下劃線的顏色和寬度。

為了達到下劃線彎曲效果，我們使用transform屬性來進行傾斜。具體地，我們使用skewY(-10deg)將該下劃線元素以Y軸為傾斜中心進行傾斜，使其呈現出彎曲的效果。

在:hover偽類下，我們對下劃線高度進行了細微的調整，同時將translateY屬性設置為-2px。這里需要注意一下，由于在原本的下劃線上加上彎曲效果后高度會增加，因此需要將translateY的值調整為負值，以避免出現重疊的效果。

通過這一簡單的代碼，我們可以輕松地實現文本下劃線的彎曲效果，使其更加個性化和時髦。當然，除了傾斜之外，我們也可以使用其他的CSS效果，如旋轉、扭曲等等，以達到更加豐富多彩的下劃線效果。