意外と細かくスタイル指定ができるtext-decoration！
underlineは便利なんだけど、位置が微妙なんだよな～といつもborder-bottomを使っていました…。しかし、その位置を変えることが可能！なんだってー！
テキスト装飾に設定できる値
線の位置を指定
text-decoration-line: none:/* なし（初期値） */
text-decoration-line: underline:/* 下線 */
text-decoration-line: overline:/* 上線*/
text-decoration-line: line-through:/* 取り消し線 */※この他にblinkという文字が点滅する値がありますが、主なブラウザーでは敢えてサポートされていません。
線の色を指定
text-decoration-color: blue;線の種類を指定
text-decoration-style: solid;/* 直線（初期値） */
text-decoration-style: double;/* 二重線 */
text-decoration-style: dotted;/* 点線 */
text-decoration-style: dashed;/* 破線 */
text-decoration-style: wavy;/* 波線 */線の太さを指定
text-decoration-thickness: auto;/* ブラウザの標準（初期値） */
text-decoration-thickness: from-font;/* フォントファイルに含まれる太さ（ない場合はauto） */
text-decoration-thickness: 3px;/* 数値で指定 */線の距離を指定
text-underline-offset: auto;/* ブラウザの標準（初期値） */
text-underline-offset: 3px;/* 数値で指定 */先の重なり方を指定
text-decoration-skip-ink: auto;/* 文字と重なった部分は途切れる（初期値） */
text-decoration-skip-ink: none;/* 文字と重なっても途切れない */一括指定
text-decorationでは「text-decoration-line」「text-decoration-color」「text-decoration-style」「text-decoration-thickness」の4つを一括で指定できます。
例えば…
text-decoration: wavy underline blue 3px;値どうしは、半角スペースで区切ります。4つMAXでなくても、１～４ついくつでも大丈夫です。
「text-underline-offset」と「text-decoration-skip-ink」は一括で指定できないので、個別に指定する必要があります。
ソース
詳しくは以下から。
