文字の装飾
text-underline-position
text-underline-position は、下線を引く位置を決めます。「g」や「p」のように下に伸びる部分と重ならないよう文字の下端に引いたり、縦書きで線を左右どちらに引くかを選んだりできます。
構文
auto | from-font | [ under || [ left | right ] ]プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
text-decoration: underline;
text-underline-position: under;
}コントロール
text-underline-positionunder
横書きの位置
縦書きで線を引く側
解説
値の書き方
auto：ブラウザが決めます。英字では、文字が並ぶ線（ベースライン）のすぐ下に引くのがふつうで、「g」や「p」の下に伸びる部分にかかります（かかるところは線が途切れます）。初期値です。from-font：フォントに下線の位置が入っていれば、それを使います。無ければautoと同じです。under：文字の下端に引きます。下に伸びる部分と重なりにくく、添え字の多い数式や化学式、漢字の多い文章で読みやすくなります。left・right：縦書きのとき、線を文字の左と右のどちらに引くかを決めます。横書きでは効きません。underと組み合わせてunder rightのようにも書けます。片方だけ書いたときは、横書きの位置はautoです。
仕様の例では、日本語には under right（横書きでは文字の下端、縦書きでは右）がすすめられています。
text-decoration では指定されない
この位置は text-decoration のショートハンドに含まれないので、別に書きます。値は子の要素に受け継がれるので、:root に書いてページ全体の下線をそろえることもできます。このページのプレビューは、補助の宣言で text-decoration: underline にしています。