在CSS中,橫線(或稱下劃線)是一種非常實用的樣式,它可以用來給文本添加下劃線效果。下面是一個基礎的下劃線樣式:
.underline { text-decoration: underline; }
上面的代碼中,我們使用了text-decoration屬性并將值設置為underline,這就實現了下劃線效果。
除了基礎的下劃線樣式,我們還可以利用CSS實現更多樣式的橫線效果。比如,我們可以在文本中添加上劃線和中劃線:
.overline { text-decoration: overline; } .line-through { text-decoration: line-through; }
上面的代碼中,我們分別使用了text-decoration屬性并將值設置為overline和line-through,就實現了上劃線和中劃線效果。
此外,在某些情況下,我們可能需要自定義橫線的顏色和樣式。這時,我們可以使用text-decoration-color、text-decoration-style屬性來實現。
.red-underline { text-decoration: underline; text-decoration-color: red; text-decoration-style: dotted; }
上面的代碼中,我們設置了下劃線顏色為紅色,樣式為點狀,這樣就實現了自定義橫線效果。
綜上所述,橫線是一種非常實用的CSS樣式,它可以為文本添加下劃線、上劃線、中劃線等效果,并且可以通過text-decoration-color、text-decoration-style屬性實現自定義橫線的顏色和樣式。