text-decoration

スタイルシート属性 text-decoration は、テキストの装飾を指定します。下線の位置を指定するにはCSSスタイルシート属性 text-underline-position を使用します。

すべての要素に対して指定可能。

書式

text-decoration: decoration decoration ...

属性値

decoration
テキストの装飾を次の値の中から選択します。属性値はスペースで区切って複数指定することもできます。
意味
noneなし
underline下線
overline上線
line-through打ち消し線
blink点滅
inherit継承

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

スタイルシート属性 text-decoration の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<span style="text-decoration: underline">underline</span>
<span style="text-decoration: overline">overline</span>
<span style="text-decoration: line-through">line-through</span>
<span style="text-decoration: blink">blink</span>
underline overline line-through blink
<p style="text-decoration: underline overline line-through">サンプル</p>

サンプル

text-underline-position

下線の場所を指定します。下線を引くにはCSSスタイルシート属性 text-decoration を使用します。

書式

text-underline-position: position

属性値

position
下線の位置を次の値の中から指定します。
意味
below下側(規定値)
above上側

対応状況

Webブラウザ対応状況
Internet Explorer 6.0
FireFox 3.0×
Google Chrome 0.3×
Opera 9.62×
Safari 3.2.1×

使用例

次にスタイルシート属性 text-underline-position を使用したHTMLの例を示します。

<span style="text-decoration: underline; text-underline-position: below">below</span>
<span style="text-decoration: underline; text-underline-position: above">above</span>
below above