本文目錄導(dǎo)讀：

1. 使用“border-bottom”屬性
2. 使用偽元素“::after”

CSS樣式在網(wǎng)頁設(shè)計(jì)中扮演著***關(guān)重要的角色，其中對(duì)文字樣式的調(diào)整更是不可或缺的一部分，我們來探討如何通過CSS為文字添加下劃線。

一、使用“text-decoration”屬性

在CSS中，我們可以通過“text-decoration”屬性為文字添加下劃線，這是一種非常直接且簡單的方法，只需要在樣式表中對(duì)需要添加下劃線的元素設(shè)置此屬性即可。

p {
    text-decoration: underline;
}

上述代碼將為所有<p>標(biāo)簽內(nèi)的文字添加下劃線。

使用“border-bottom”屬性

除了使用“text-decoration”屬性，我們還可以通過給文字添加底部邊框的方式來達(dá)到添加下劃線的效果，這種方式在某些情況下可能會(huì)更加靈活和方便。

span {
    border-bottom: 1px solid black;
}

這段代碼將為所有<span>標(biāo)簽內(nèi)的文字添加一個(gè)黑色的底部邊框，即下劃線。

使用偽元素“::after”

我們還可以利用CSS的偽元素“::after”來為文字動(dòng)態(tài)添加下劃線，這種方式適用于一些特殊的需求，比如只在某些特定情況下為文字添加下劃線。

a::after {
    content: "";
    border-bottom: 1px solid black;
    display: block; /* 使偽元素獨(dú)占一行 */
    width: 100%; /* 使偽元素覆蓋整個(gè)元素寬度 */
}

上述代碼將為所有鏈接（<a>標(biāo)簽）在文字后動(dòng)態(tài)添加一個(gè)黑色的下劃線，需要注意的是，“::after”中的“content”屬性必須設(shè)置為非空字符串，否則偽元素不會(huì)顯示，這里我們將其設(shè)置為空字符串，即不添加任何額外內(nèi)容?！癲isplay”和“width”屬性用于調(diào)整偽元素的位置和大小。