【CSS Modules】text-underline-positionプロパティの使い方

text-underline-positionプロパティは、テキストに適用される下線（アンダーライン）の表示位置を制御するプロパティです。このプロパティは、text-decorationプロパティのunderline値によって表示される下線の具体的な位置を調整するために使用されます。特に、日本語のような縦書きテキストや、欧文テキストにおいて下線が文字のストローク（ディセンダーなど）と重なって読みにくくなるのを避けたい場合に役立ちます。

主な値としては、auto（またはauto-pos）、under、left、right、from-fontなどがあります。autoはブラウザのデフォルトの動作に任せる設定で、多くの場合、テキストのベースラインの下に下線が表示されます。underを指定すると、下線は常にテキストのディセンダー（文字の下にはみ出す部分）の下に引かれ、文字と重なることを防ぎます。縦書きテキスト、つまりwriting-modeプロパティがvertical-rlやvertical-lrに設定されている場合、leftはテキストのグリフ（文字の形）の左側に、rightは右側に下線を表示させます。from-fontは、使用しているフォント自体が持つ下線の位置情報に基づいて表示するようブラウザに指示します。

このプロパティは、単に下線を引くだけでなく、その視覚的な品質と可読性を向上させることを目的としています。テキストのデザイン要件が厳しく、下線の見た目を細かく調整する必要がある場面で特に有効です。これにより、さまざまな言語や表示モードにおけるテキストの表現力を高め、より洗練されたユーザーインターフェースの実現に貢献します。

Copy
1selector {
2  text-underline-position: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません