跳轉到

建立 2025-02-25 更新 2026-09-11

文字裝飾（Text Decoration）

用來加底線、刪除線、上劃線，或改連結預設底線的顏色與粗細。

線條種類

.deleted { text-decoration: line-through; }
.hint { text-decoration: underline dotted; }
text-decoration-line 效果
none 無（常拿來拿掉連結底線）
underline 底線
overline 上劃線
line-through 刪除線
可組合 underline overline

連結底線

純靠顏色區分連結不夠。若設計上要拿掉底線，請提供對比色、字重或 hover 底線，讓人看得出來能點。

顏色、樣式、粗細

a {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-style: solid;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}
屬性 常用值
text-decoration-style solid、double、dotted、dashed、wavy
text-decoration-thickness auto、from-font、2px、0.1em
text-underline-offset 底線與文字的距離，避免切到注音或下行字母

縮寫：

mark.fix {
  text-decoration: underline red wavy 2px;
}

使用情境

情境 建議
刪除的價錢 line-through + 較淡的 color
拼字錯誤示意 wavy 底線
連結 細底線 + hover 變明顯
標題裝飾 多半改用 border-bottom 或偽元素，比底線好控間距

總結

拆開寫 line / color / style / thickness 比一長串縮寫好維護。底線位置用 text-underline-offset 微調。

水平對齊請看 文字對齊。