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	説明
色	色を指定します。
値を継承しない

文字に線を引きます。
以下はMDNのtext-decorationプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration

コード

サンプルのコードです。
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