テキスト
text-decoration
text-decoration は、文字に下線・上線・打ち消し線を引くショートハンドです。線の種類・線種・色・太さを順不同でまとめて書けます。
構文
<'text-decoration-line'> || <'text-decoration-style'>
|| <'text-decoration-color'> || <'text-decoration-thickness'>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
text-decorationunderlinetext-decoration-line
wavytext-decoration-style
#e66465text-decoration-color
3pxtext-decoration-thickness
コード
.box {
text-decoration: underline wavy #e66465 3px;
}コントロール
text-decoration-lineunderline
underline
overline
line-through
text-decoration-stylewavy
text-decoration-color#e66465
text-decoration-thickness3px
解説
4 つのロングハンド
text-decoration-line：underlineoverlineline-throughを並べて、いくつでも同時に引けます。初期値はnoneです。text-decoration-style：soliddoubledotteddashedwavy（波線）。text-decoration-color：初期値はcurrentcolor（文字の色）です。text-decoration-thickness：初期値のautoはブラウザ任せ、from-fontはフォントが指定する太さです。%は文字の大きさ（1em）に対する割合です。
ショートハンドで省略したパーツは初期値に戻ります。a { text-decoration: none } でリンクの下線を消すと、線種や色も初期値になります。
下線の位置を調整する
文字との間隔は text-underline-offset で、下線をどこに引くかは text-underline-positionで変えられます。どちらもショートハンドには含まれず、text-decoration を書き直してもリセットされません。
子の要素には外せない
線は、指定した要素の中の文字すべてにまたがって引かれます。子の要素に text-decoration: none を書いても、親が引いた線は消せません。ただし display: inline-block の子や、position: absolute などで流れから外した子には、親の線は引かれません。