文字の下線をスタイル調整するCSSプロパティ

こんにちは、ナカムラです。
最近関わった案件で文字に下線が引かれたデザインが多かったので、今回は下線のスタイルを調整するときに使うCSSプロパティをご紹介したいと思います。

DEMO

See the Pen CSSで文字の下線をスタイル調整する by Nakamura (@takayo-nakamura) on CodePen.

まず一番上はtext-decoration: underline;で下線を表示しただけの状態です。
デフォルトなのですが、デザインでこの状態になっているものに出会ったことがありません。
色が違う、幅が違う、表示位置が違うなど、デザイン通りに作るにはスタイルの調整が必要です。

昔はタグで囲ってborder-bottomやbefore要素、backgroundなどで実装していました。
その場合、作り方によっては改行に対応できないこともありました。
地味に手間のかかる作業で、若干苦手な意識がありましたが今はそんなに悩むことなく実装できます。

下線の色を変えるCSSプロパティ

text-decoration-color: #ffec3f;

text-decoration-color - CSS: カスケーディングスタイルシート | MDN

下線の太さを変えるCSSプロパティ

    text-decoration-thickness: 0.25em;

text-decoration-thickness - CSS: カスケーディングスタイルシート | MDN

下線の位置を変えるCSSプロパティ

    text-underline-offset: -0.25em;

text-underline-offset - CSS: カスケーディングスタイルシート | MDN

※縦書きの時に左側に変えたい時などはtext-underline-positionというものもあります。
text-underline-position - CSS: カスケーディングスタイルシート | MDN

上記の３つを一括で書く方法もあります。
text-decoration - CSS: カスケーディングスタイルシート | MDN

その他の気になるテキスト関連のCSSプロパティ

使ったことはないのですが、他にも便利そうなテキスト関連のCSSプロパティがありました。

text-emphasis

文字の上に圏点（強調するための点）を表示するスタイルをつける時に使用します。
ルビで実装しているのを見たことがありますが、できればスタイルで実装したいですね。
強調なのでstrongやbタグが良いんじゃないかと思います。
text-emphasis - CSS: カスケーディングスタイルシート | MDN

text-transform

大文字で表示したい時などに。
text-transform - CSS: カスケーディングスタイルシート | MDN

text-combine-upright

1文字分のスペースに収めたいときに（縦書きの時の数字など）
これは便利ですが…縦書き関連はブラウザによっては組み合わせによって不具合が起きるパターンもあるのではないかと心配になりますね。実際に使う時にはまずは検証したいと思います。（safariとか・・大丈夫かな？）
text-combine-upright - CSS: カスケーディングスタイルシート | MDN