許多網頁設計師傾向于在文字下方添加下劃線，以突出并強調其重要性。在CSS中，我們使用text-decoration屬性來添加下劃線。

/*使用text-decoration實現下劃線*/
.text-underline{
text-decoration: underline;
}

如果您想為下劃線設置不同的樣式，例如顏色，線條樣式或厚度，則可以使用text-decoration-color，text-decoration-style和text-decoration-thickness屬性。在這里，我們設置了一個藍色的虛線下劃線。

/*使用text-decoration相關屬性實現自定義下劃線*/
.custom-underline{
text-decoration-color: blue;
text-decoration-style: dotted;
text-decoration-thickness: 2px;
}

對于想在文本上方添加橫線的設計師，您可以使用:before或:after偽元素來創建。

/*使用:before或:after偽元素添加上劃線*/
.text-overline:before{
content: "";
height: 1px;
width: 100%;
background-color: black;
display: block;
position: relative;
top: -5px;
}

通過理解CSS中text-decoration以及相關屬性的用法，您可以輕松實現各種下劃線或上劃線的效果。