在CSS中，我們常常需要給一個文本添加一條下劃線，下劃線的樣式、顏色和位置都可以自行設置。

下面是一段列舉了幾個常見的下劃線樣式的CSS代碼：

/* 實線下劃線，為文本添加默認下劃線 */
text-decoration: underline;
/* 虛線下劃線，為文本添加虛線下劃線 */
text-decoration: underline dotted;
/* 雙線下劃線，為文本添加兩條下劃線 */
text-decoration: underline double;
/* 去掉下劃線，將原本帶有下劃線的文本去掉下劃線 */
text-decoration: none;

除此之外，下劃線的樣式還可以自己定制。我們可以通過CSS的偽元素選擇器（::before或::after）來給下劃線加一些修飾，例如：

/* 給默認下劃線添加樣式 */
text-decoration: underline;
/* 使用::before偽元素選擇器添加修飾 */
text-decoration:none;
position:relative;
&::before {
content: "";
position:absolute;
left:0;
width:100%;
height:0.05em;
background-color: #f00;
bottom:0;
}
/* 修改下劃線的顏色、樣式和位置 */
text-decoration:none;
position:relative;
&::before {
content: "";
position:absolute;
left:0;
width:60%;
height:0.05em;
background-color: #50a3bb;
bottom:-0.2em;
border-radius: 0.05em;
}

我們可以在需要添加下劃線的元素上添加偽元素選擇器并控制其樣式，從而實現自定義下劃線的效果。