text-decorationは下線ひく、打ち消し線をひくとかはできることは、結構知ってると思います。

一般的によく使われている、下線、打ち消し線

.underline {
  text-decoration: underline; // 下線
}
.strikethrough {
  text-decoration: line-through; // 打ち消し線
}

下線を引きます。

打ち消し線を引きます。

線の色を変える

text-decoration-colorをつかって線の色を変更できます。

.underline{
  text-decoration: underline;
  text-decoration-color: #ff0; // 線の色を指定
}

下線の色を変更します。

波線や破線などに変更する

text-decoration-styleをつかって波線、二重線、破線、点線に変更することができます。

.underline-wavy {
  text-decoration: underline;
  text-decoration-style: wavy; // 波線
}

.underline-double {
  text-decoration: underline;
  text-decoration-style: double; // 二重線
}

.underline-dashed {
  text-decoration: underline;
  text-decoration-style: dashed; // 破線
}

.underline-dotted {
  text-decoration: underline;
  text-decoration-style: dotted; // 点線
}

下線を波線に変更します。

下線を二重線に変更します。

下線を破線に変更します。

下線を点線に変更します。

先の太さを変える

text-decoration-thickness

.underline{
  text-decoration: underline;
  text-decoration-thickness: 10px; // 線の太さ
}

線を太くします。

下線で文字と重なった場合に線を途切れさせてたのをどうするか

text-decoration-skip-inkを使って線が途切れるか途切れないか指定する
デフォルトがautoで途切れます。

.underline{
  text-decoration: underline;
  text-decoration-skip-ink: none;  // 線が途切れないようになる。
}

Typography

Typography

上がデフォルトで、下がnone指定

線と文字の距離を指定する

text-underline-offsetを使って距離を指定します。

.underline{
  text-decoration: underline;
  text-underline-offset: 20px;  // 距離を指定
}

線との距離を変更する。

おまけ

今までは下線を引くとか消すとかにしか使ってなかったですが、今後の可能性を感じますね。

マーカーを引いてみる

いままではグラデーションのをつかってやってたことがこっちでできるようになりますね。
やり方はこちら。

.marker{
  text-decoration-color: #ff0;
  text-underline-offset: -.3em;
  text-decoration-thickness: .5em;
  text-decoration-skip-ink: none;
}

CSSでできることが増えすぎると、コーダーは楽になるのかそれともはたまた。。。