在網頁設計中，我們常常需要使用各種樣式的下劃線來美化文字效果。而在制作這些下劃線時，我們可以使用純CSS代碼進行實現。下面介紹一下使用純CSS實現文字下劃線的方法。

/* 設置文本下劃線顏色 */
.text-underline{
text-decoration: underline; /* 設置文本有下劃線 */
text-decoration-color: red; /* 為下劃線設置顏色 */
}

上述代碼中，我們首先為需要添加下劃線的文本添加一個類名，這里我使用的是"text-underline"。然后使用text-decoration屬性為文本添加下劃線，再使用text-decoration-color屬性設置下劃線顏色，這里我設置的是紅色。

/* 不使用文本下劃線，而是配合border-bottom來實現文本下劃線效果 */
.border-bottom{
border-bottom: 1px solid blue; /* 使用下邊框來實現下劃線 */
display: inline-block; /* 確保下劃線不會占據新的一行 */
}

上述代碼實現的是通過配合border-bottom屬性來實現文本下劃線的效果。同樣地，我們使用類名"border-bottom"，然后設置border-bottom屬性為文本添加下劃線效果，這里我設置的是1像素的實線藍色下劃線。但是使用border-bottom來實現下劃線后需要注意，需要使用display: inline-block來使下劃線不會占據新的一行。否則如果單獨設置下劃線會在文本的一下產生一段空白。

綜上所述，上述兩種方法是使用純CSS代碼實現的文字下劃線的兩種常見方式。如果我們需要更加豐富的效果可以在這些代碼上進行改進。