はじめに
CSSでテキストの下線を装飾する際にこれまで border-bottom を利用することが多かったが text-decoration が色々設定できることを知ったのでまとめてみました。
下線を引く
See the Pen Untitled by kiitan128 (@kiitan) on CodePen.
色を変更する
text-decoration-color で色を変えられる。
See the Pen Untitled by kiitan128 (@kiitan) on CodePen.
下線の太さを調整する
text-decoration-thickness で下線の太さを調整できる。
See the Pen Untitled by kiitan128 (@kiitan) on CodePen.
下線テキストとの距離を調節する
下線のみですが text-underline-offset でテキストとの距離を設定することができます。
See the Pen Untitled by kiitan128 (@kiitan) on CodePen.
線が途切れないようにする
text-decoration-skip-ink で gpy などの下線を突き抜けてしまう文字が入っている時に下線を途切れないようにする。
See the Pen Untitled by kiitan128 (@kiitan) on CodePen.
下線の位置を変更する
text-underline-position で縦書きなどの時に下線を引く位置を変更する必要が出た際に使える。
下線なので text-underline-offset も利用できる。
See the Pen Untitled by kiitan128 (@kiitan) on CodePen.
最後に
この記事をみて話してみたいと思ってもらえたら、こちらのDevトークに「話したい」をお願いします