[CSS] 利用 text-decoration 設定文字的裝飾(底線、刪除線、上方線 )方式

分享:
CSS

利用 CSS 去做文字的裝飾,會使用 text-decoration,基本上可以有上方的線(overline)、刪除線(line-through)和底線(underline)。

.overline{
  text-decoration: overline;
}
.line-through{
  text-decoration: line-through;
}
.underline{
  text-decoration: underline;
}

 

像是:

 

text-decoration 也可以加上顏色,像是這樣:

.overline{
  text-decoration: overline red;
}
.line-through{
  text-decoration: line-through blue;
}
.underline{
  text-decoration: underline green;
}

 

線條可以加上樣式,有 wavy、solid 跟 dashed 可以用:

.overline{
  text-decoration: wavy overline red;
}
.line-through{
  text-decoration: solid line-through blue;
}
.underline{
  text-decoration: dashed underline green;
}

 

線條可以調整粗細,再加上數值即可:

.underline{
  text-decoration: solid underline green 4px;
}

 

也可以一次設定多種線條,但要注意順序:

.underline{
  text-decoration: dashed underline overline green;
}

 

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。