これまであまり意識したことがなかったのですが、text-decorationプロパティはどこまでの装飾が可能なのか気になったので調べてみました。
一番よく使われているtext-decorationは、aリンクの下線を消す「text-decoration:none」で、それ以外だとあまり使われていない(border の方が優遇されてそう)プロパティだと思っているのですが、text-decorationはborderにも負けないぞということで、まとめておきます。
text-decorationはショートハンド型
text-decorationは、backgroundやborderと同じくショートハンド型です。(なおIEではショートハンド指定できない)
text-decorationでは、以下の4種類をまとめて指定しています。
- text-decoration-line（線の位置）
- text-decoration-color（色）
- text-decoration-style（形）
- text-decoration-thickness（線の太さ）
よく見るtext-decoration:underline は、underline(線の位置)・auto(色) solid(形) auto(太さ) と言うことになります。
ちなみに、text-decoration-thicknessについてはまだcss4の草案レベルで、公式に定義されているものではありません。
そのため、最新版でないモダンブラウザおよびsafari、IE 、多くのブラウザアプリ（andoroid用）では指定できずエラーとなります。
text-decoration-line
- underline (下線)
- overline (上線)
- line-through (打ち消し線)
- none
-line プロパティにはもう１つblink (点滅) というものがありますが、非推奨項目になっています。
複数指定も可能
text-decoration-line プロパティは複数指定が可能なので、
p {
text-decoration-line: overline line-through underline;
}
このように全部の線を引くこともできます。
text-decoration-color
色を指定します。
text-decoration-style
ほぼborder-styleと同じですが、wavy だけはborder-styleでは表現できません。
- solid(一本線)
- dashed (破線)
- dotted (点線)
- double (二重線)
- wavy (波線)
text-decoration-thickness
-thickness は、px em rem auto %で線の太さを表します(%指定対応はfirefoxブラウザのみ)。
線の厚みを増していくとテキストのない方向（overlineなら上、underlineなら下）に太くなり、文字には重なりません。
text-decoration-thicknessにマイナスの値を指定すると無視されますが、上限はありません。10000%とか指定しても大丈夫です。
このテキストには、text-decoration-thickness:10em; を指定しているので、対応ブラウザなら下に10em分の線がひかれているはずです。
なお、キーワード指定にはfontファイルの指定値に従う「from-font」という値もありますが、フォントファイルに線の指定がなければautoになるので、特に覚えなくて良さそうです。
