本文目錄導讀：

1. 設置下劃線顏色
2. 設置下劃線粗細
3. 設置下劃線位置

CSS字體下劃線設置詳解

在CSS中，字體下劃線的設置可以通過“text-decoration”屬性來實現(xiàn)，這個屬性可以接收多種值，包括“underline”、“overline”、“l(fā)ine-through”等，分別表示下劃線、上劃線和刪除線，下面我們將詳細介紹如何設置CSS字體下劃線。

設置下劃線顏色

可以通過“text-decoration-color”屬性來設置下劃線的顏色，將文本“Hello World”的下劃線顏色設置為紅色：

span {
  text-decoration: underline;
  text-decoration-color: red;
}

設置下劃線粗細

可以通過“text-decoration-style”屬性來設置下劃線的粗細，將文本“Hello World”的下劃線設置為雙線：

span {
  text-decoration: underline;
  text-decoration-style: double;
}

設置下劃線位置

可以通過“text-decoration-position”屬性來設置下劃線的位置，將文本“Hello World”的下劃線設置在文字上方：

span {
  text-decoration: underline;
  text-decoration-position: over;
}

需要注意的是，以上屬性在CSS中的兼容性較好，但在一些老舊的瀏覽器版本中可能無法完全支持，在使用時需要注意測試兼容性問題。