text-decorationプロパティはテキストに下線、上線、打ち消し線、点滅などの装飾を施します。適用対象にはなっても、置換要素に対する指定は無効です。装飾ラインの色は colorプロパティで指定します。
noneunderlineoverlineline-throughblinkinheritnonetext-decorationプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。半角スペースで区切って、2つ以上のキーワードを指定することも可能です。
noneunderlineu要素の効果に類似)overlineline-throughdel要素, s要素, strike要素の効果に類似)blinkblink要素の効果に類似)"blink" に対応しているのは Netscape, Firefox, Opera のみです。仕様ではこの値をサポートしていなくても CSS適合 UA と認められる(つまり、必ずしも対応する必要性はないということ)とあり、アクセシビリティ・ガイドライン1.0 CSS技術書においても規則的に表示されたり消えたりというような表現は別の表現に変更する
とあります。つまり、仕様に定義されていても不要な機能の位置づけであり、多くのユーザーにとっても文字をチカチカと点滅させる表現は情報の視認性と判読性を低下させるだけの迷惑な表現でしかなく、このような表現を使うこと自体お奨めできません。
仕様には text-decorationプロパティは値を子孫要素に継承しないと定義されているのですが、ブロック要素に指定された場合は子孫要素のインラインボックスにはすべて同じ装飾を施されるべきとあります。では、ちょっとした問題を用意しました。次のサンプルの span要素内のテキストには一体どのような装飾が施されるのかを考えてみてください。
<p style="color : red ; text-decoration : underline ;"> <span style="color : blue ; text-decoration : none ;"> このテキストの装飾は一体どうなるの?</span></p>
span要素内のテキストには、装飾を施さない指定があるため下線は引かれないspan要素内のテキストに下線が引かれ、下線の色は span要素の前景色と同じ青色になるsapn要素内のテキストに下線が引かれ、下線の色は p要素で定義されていた赤色になるこの3択の中に正解があるわけですが、正解はなんと3番です。テキストには下線が引かれ、下線の色はブロック要素である p要素で定義されていた赤色になります。つまり、子孫要素に装飾を施さない指定があっても、親要素にて定義されていた装飾はすべての子孫要素に同じように反映され、子孫要素に個別に文字色が指定されていても、装飾ラインの色は同じ色にはならず、装飾ラインの色を変えるのであれば、子孫要素で個別に text-decorationプロパティを再定義しなければならないのです。
このテキストの装飾は一体どうなるの?
このように text-decorationプロパティには値の継承性はありませんが、指定されている装飾の効果は子孫要素へと継承されることになります。
blink" の値は未実装)blink" の値は未実装)blink" の値は未実装)
a:hover { text-decoration : none ; }
.underline { text-decoration : underline ; }
.overline { text-decoration : overline ; }
.line-through { text-decoration : line-through ; }
.blink { text-decoration : blink ; }
.doubleline { text-decoration : underline overline ; }