テキスト
text-underline-offset
text-underline-offset は、下線を文字からどれだけ離して引くかを指定します。リンクの下線を少し下げたいときなどに使います。
構文
auto | <length-percentage>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
text-decoration: underline #e66465 4px;
text-underline-offset: 12px;
}コントロール
text-underline-offset12px
解説
ベースラインから測る
長さは、文字が乗っている線（アルファベットのベースライン）から下向きに測ります。負の値にすると上に上がり、文字に重なります。初期値の auto はブラウザ任せです。% と em は文字の大きさに対する割合なので、文字を大きくすると間隔も広がります。
text-decoration には含まれない
このプロパティは text-decoration ショートハンドの一部ではないので、下線そのものは別に text-decoration: underline で引きます。このページのプレビューでも下線を補助の宣言として書いています。逆に、text-decoration を書き直しても、この値はリセットされません。
また継承されるプロパティなので、body に書いておけば、ページ全体のリンクの下線の位置をまとめてそろえられます。上線や打ち消し線には効きません。