text-decoration 文字に線を引く コピペで使えるHTML+CSS

スポンサーリンク

text-decorationプロパティの概要

文字にアンダーライン、打消し線、点線を引くCSS
text-decoration
目的アンダーライン(下線)などを引いて文字を強調した表示にする。
使用<span> <mark> <a> 
関連text-underline-position linear-gradient 
初期text-decoration : none solid current-color auto
第三代徳川将軍は徳川家光です。
第三代徳川将軍は<span style="text-decoration: underline solid #ff42ad 5px;">徳川家光</span>です。

text-decoration : 線の位置 スタイル 色 太さ

未指定の場合、初期値である橙色の値が選択される

線の位置

none
線を表示しない
<span style="text-decoration: none solid #ff0000 auto;">線を表示しない</span>
underline
下線 / アンダーラインを引く
<span style="text-decoration: underline solid #ff0000 auto;">下線 / アンダーラインを引く</span>
overline
上線 / オーバーラインを引く
<span style="text-decoration: overline solid #ff0000 auto;">上線 / オーバーラインを引く</span>
line-through
中線 / センターラインを引く
<span style="text-decoration: line-through solid #ff0000 auto;">中線 / センターラインを引く</span>

スタイル

solid
1本の線を引く
<span style="text-decoration: underline solid #ff0000 auto;">1本の線を引く</span>
double
2本の線を引く
<span style="text-decoration: underline double #ff0000 auto;">2本の線を引く</span>
dotted
点線を引く
<span style="text-decoration: underline dotted #ff0000 auto;">点線を引く</span>
dashed
破線を引く
<span style="text-decoration: underline dashed #ff0000 auto;">破線を引く</span>
wavy
波線を引く
<span style="text-decoration: underline wavy #ff0000 auto;">波線を引く</span>

無指定
current-color 現在の色
<span style="text-decoration: underline solid auto;">cueewnr-color現在の色</span>
#ff0000
4pxの赤い線
<span style="text-decoration: underline solid #ff0000 auto;">赤い線</span>
#0000ff
4pxの青い線
<span style="text-decoration: underline solid #0000ff auto;">青い線</span>

太さ

auto
適切な太さ設定される
<span style="text-decoration: underline solid #ff0000 auto;">適切な太さに設定される</span>
from-font
フォントの設定に従う。設定がなければauto
<span style="text-decoration: underline solid #ff0000 from-font;">フォントの設定に従う。設定がなければauto</span>
4px
4pxの赤い線
<span style="text-decoration: underline solid #ff0000 4px;">4pxの赤い線</span>

CSSデザイン

mark 背景色を消しアンダーラインを引く コピペで使えるHTML+CSS
mark要素のプロパティであるtext-decorationを修正してアンダーラインを引くようにし、蛍光マーカーを引いたようなデザインを実現します。ピンク、イエロー、ブルー、グリーンの蛍光マーカーを再現します。
del 打消し線の色、太さ、種類を変更 コピペで使えるHTML+CSS
多くのブラウザにおいてdelは文字の中央に打消し線が表示されます。CSSのtext-decorationプロパティを修正することによってその太さや、打消し線を破線や直線などの線の種類を変更します。
s 打消し線の太さと色を変更 コピペで使えるHTML+CSS
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
a リンクのアンダーラインを消す コピペで使えるHTML+CSS
リンクアンカーのa要素について、text-decorationを修正してアンダーラインを消し、文字色を変更します。