text-decorationプロパティ

TOPページに戻る > CSS

text-decorationプロパティ

下線の表示、非表示、上線の表示、打ち消し線、文字の点滅が指定できます
リンクの下線の非表示もこのプロパティで指定できます
blink文字の点滅に対応しているブラウザはFireFox、Operaのみです

使い方（書式）

セレクタ { text-decoration: 値; }                                    

text-decorationプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
none	下線を非表示にする
underline	下線を表示する
overline	上線を表示する
line-through	打ち消し線を表示する
blink	文字を点滅する　（FireFox、Operaのみ）

実際の指定方法

a { text-decoration: none; }   /* リンクの下線を消す */

.hoge2 { text-decoration: underline; }  /* 下線を表示する */

.hoge3 { text-decoration: overline; }   /* 上線を表示する */

.hoge4 { text-decoration: line-through; }   /* 打ち消し線を表示する */

.hoge5 { text-decoration: blink; }   /* 文字を点滅する（FireFox、Operaのみ） */

html部分

<p><a href="#">下線を非表示にしたリンク</a></p>
<p class="hoge2">下線を表示</p>
<p class="hoge3">上線を表示</p>
<p class="hoge4">打ち消し線を表示</p>
<p class="hoge5">文字を点滅する（FireFox、Operaのみ）</p>

実際の表示

下線を非表示にしたリンク

下線を表示

上線を表示

打ち消し線を表示

文字を点滅する（FireFox、Operaのみ）

複数の値を適用

複数の値を適用できます

p { text-decoration: underline overline; }  /* 下線、上線を表示する */

html部分

<p>下線、上線を表示</p>

実際の表示

下線、上線を表示