text-decoration の下線を文字と重ならないようにする

CSSの「text-decoration: underline;」で文字に下線を付けた時、文字と重なって読みづらく感じることはありませんか？
この下線の位置を変更できるという事はあまり知られていなかったりするので紹介します。

標準状態の表示

英文はいいけど日本語の、特に漢字の下線は文字とくっついて窮屈な印象となってしまっています。（ブラウザによって表示が異なる場合があります。）

text-underline-offset を使って解決

下線の位置を変更するプロパティは「text-underline-offset」です。
前節の下線は「text-underline-offset: auto;」でブラウザまかせの初期状態。値を指定してやることで下線の位置を変更できます。
指定する値は標準位置（auto）からどれだけずらすかです。

p {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

少し隙間が空いて上品な感じになりました！

text-decoration は一括指定のプロパティ

ちなみに忘れがちですが、text-decoration は以下のプロパティをまとめて指定する一括指定のプロパティとなっており、線の装飾を変更することができます。

• text-decoration-line（装飾の種類）
• text-decoration-style（線の種類）
• text-decoration-thickness（線の太さ）
• text-decoration-color（線の色）

では、また！