cssだけで文字に色々な線を引く方法

MARKLEAPS

2021.04.09

cssだけで文字に色々な線を引く方法

cssだけで文字に色々な線を引く方法をご紹介します。

下線を引く

p {text-decoration: underline;}

1	p {text-decoration: underline;}

細さを変えられる線を引く

p {border-bottom: 3px solid #CC0000;}

1	p {border-bottom: 3px solid #CC0000;}

点線を引く

p {border-bottom: 3px dotted #CC0000;}

1	p {border-bottom: 3px dotted #CC0000;}

破線を引く

p {border-bottom: 3px dashed #CC0000;}

1	p {border-bottom: 3px dashed #CC0000;}

二重線を引く

p {border-bottom: 3px double #CC0000;}

1	p {border-bottom: 3px double #CC0000;}

蛍光ペン風の線を引く（文字全体）

p {background: linear-gradient(transparent 0%, yellow 0%);}

1	p {background: linear-gradient(transparent 0%, yellow 0%);}

蛍光ペン風の線を引く（文字の下半分）

p {background: linear-gradient(transparent 50%, yellow 50%);}

1	p {background: linear-gradient(transparent 50%, yellow 50%);}

蛍光ペン風の線を引く（細め）

p {background: linear-gradient(transparent 70%, yellow 70%);}

1	p {background: linear-gradient(transparent 70%, yellow 70%);}

途中で色が変わる線を引く

p {
	border-bottom: solid 3px #CCCCCC;
	position: relative;
}
p:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #CC0000;
	bottom: -3px;
	width: 50%;
}

p {

border-bottom: solid 3px #CCCCCC;

position: relative;

}

p:after {

position: absolute;

content: " ";

display: block;

border-bottom: solid 3px #CC0000;

bottom: -3px;

width: 50%;

}

CSS

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

cssだけで文字に色々な線を引く方法

下線を引く

細さを変えられる線を引く

点線を引く

破線を引く

二重線を引く

蛍光ペン風の線を引く（文字全体）

蛍光ペン風の線を引く（文字の下半分）

蛍光ペン風の線を引く（細め）

途中で色が変わる線を引く

よく読まれている関連記事

[CSS] カラーコードで透明度を指定する方法

関連最新記事

[HTML] detailsとsummaryタグでアコーディオン（開閉）コンテンツを作る

[CSS] font-familyの指定方法

[HTML] SEOに強いセマンティックコーディングとは

[CSS] カラーコードで透明度を指定する方法

社内風景2

社内風景