text-decorationを学び直す

Last updated at 2022-11-30Posted at 2022-11-30

ひとりCSS Advent Calendar 2022 1日目です。
text-decoration関連のプロパティを学び直します。

text-decoration プロパティ

text-decoration とはテキストを装飾するプロパティ
- a 要素（リンク）にアンダーラインをつけるかつけないかといった指定をすることが多い
  - もちろん他の要素にも使える
text-decoration はショートハンドだった
- （知らなかった）
- 以下をまとめて指定できる
  - text-decoration-line - 線の位置
    - none(なし)
    - underline(下線)
    - overline(上の線)
    - line-through(文字の中央)
    - underline overline のように空白スペースで区切ることで複数設定も可能
  - text-decoration-color - 線の色
  - text-decoration-style - 線の種類
    - solid(単独線)
    - double(二重線)
    - dotted(点線)
    - dashed(破線)
    - wavy(波線)
  - text-decoration-thickness 太さ

text-decoration: underline を設定した場合、text-underline-offset 線と文字の距離を広げることが可能
- 今まで text-decoration ではなく、padding-bottom border-bottom の両方を設定することで調整していた
  - このような設定をしなくて済む

text-decoration で遊んでみた。