text-decoration
スタイルシート属性 text-decoration は、テキストの装飾を指定します。下線の位置を指定するにはCSSスタイルシート属性 text-underline-position を使用します。
書式
text-decoration: decoration decoration ...
属性値
- decoration
- テキストの装飾を次の値の中から選択します。属性値はスペースで区切って複数指定することもできます。
値 意味 none なし underline 下線 overline 上線 line-through 打ち消し線 inherit 継承
使用例
スタイルシート属性 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>
underline
overline
line-through
<span style="text-decoration: overline">overline</span>
<span style="text-decoration: line-through">line-through</span>
<p style="text-decoration: underline overline line-through">サンプル</p>
サンプル
text-underline-position
下線の場所を指定します。下線を引くにはCSSスタイルシート属性 text-decoration を使用します。
書式
text-underline-position: position
属性値
- position
- 下線の位置を次の値の中から指定します。
値 意味 below 下側（規定値） above 上側
使用例
次にスタイルシート属性 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
<span style="text-decoration: underline; text-underline-position: above">above</span>