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

1. CSS下劃線基礎(chǔ)應(yīng)用
2. 自定義下劃線樣式
3. 使用偽元素實現(xiàn)下劃線效果

CSS樣式中下劃線的應(yīng)用

在現(xiàn)代網(wǎng)頁設(shè)計中，文字下劃線的應(yīng)用廣泛且重要，其不僅用于強調(diào)文本內(nèi)容，還可作為鏈接的標(biāo)識，通過CSS（層疊樣式表），我們可以輕松實現(xiàn)文字下劃線的自定義，本文將介紹如何使用CSS為文字添加下劃線。

CSS下劃線基礎(chǔ)應(yīng)用

在CSS中，我們可以使用“text-decoration”屬性為文字添加下劃線。

1、為所有段落添加下劃線：

p {
  text-decoration: underline;
}

2、為特定類名的元素添加下劃線：

.underline-text {
  text-decoration: underline;
}

自定義下劃線樣式

除了基本的下劃線，CSS還允許我們自定義下劃線的顏色、樣式和厚度。

.custom-underline {
  text-decoration-color: red; /* 下劃線顏色 */
  text-decoration-style: double; /* 下劃線樣式，如實線、雙線等 */
  text-decoration-thickness: 2px; /* 下劃線粗細(xì) */
}

使用偽元素實現(xiàn)下劃線效果

在某些情況下，我們可能需要更靈活的下劃線應(yīng)用方式，這時可以利用偽元素:after來創(chuàng)建自定義的下劃線效果。

p:after {
  content: ''; /* 偽元素必須有內(nèi)容屬性 */
  display: block; /* 使偽元素成為塊級元素 */
  border-bottom: 1px solid #000; /* 創(chuàng)建下劃線效果 */
  margin-top: 5px; /* 調(diào)整下劃線與文本的距離 */
}