CSS 文字に線を引くサンプル(text-decoration)

CSSの文字に線を引くサンプルです。
text-decorationプロパティを使用します。

text-decoration プロパティ

text-decoration : 値1  値2  値3
値1 : text-decoration-line (線の位置)
値1 説明
none 線は引きません。(初期値)
line-through 取り消し線を引きます。
underline 下線を引きます。
overline 上線を引きます。
値2 : text-decoration-style (線の種類)
値2 説明
solid 一重の線 (初期値)
double 二重線
dotted 点線
dashed 破線
wavy 波状の線
値3 : text-decoration-color (線の色)
値3 説明
色を指定します。
値を継承しない

コード

サンプルのコードです。
3-12行目は、線の種類として値を1つのみ指定しています。
15-24行目は、線の種類として値を3つ指定しています。

<style>
#p1{
	text-decoration:none;
}
#p2{
	text-decoration:line-through;
}
#p3{
	text-decoration:underline;
}
#p4{
	text-decoration:overline;
}
#p5{
	text-decoration:underline double red;
}
#p6{
	text-decoration:underline dotted red;
}
#p7{
	text-decoration:underline dashed red;
}
#p8{
	text-decoration:underline wavy red;
}
</style>
<body >
<p id="p1">あいうえお none</p>
<p id="p2">あいうえお line-through</p>
<p id="p3">あいうえお underline</p>
<p id="p4">あいうえお overline</p>
<p id="p5">かきくけこ underline double red</p>
<p id="p6">かきくけこ underline dotted red</p>
<p id="p7">かきくけこ underline dashed red</p>
<p id="p8">かきくけこ underline wavy red</p>
</body>

サンプル

上記コードのサンプルです。

あいうえお none

あいうえお line-through

あいうえお underline

あいうえお overline

かきくけこ underline double red

かきくけこ underline dotted red

かきくけこ underline dashed red

かきくけこ underline wavy red

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 文字の垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)



△上に戻る