2021.04.09

HTML・CSS

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プロパティの記述順｜視覚順とアルファベット順

2025.09.25

[CSS] shape-outside プロパティで画像にテキストを回り込ませる方法

2025.09.10

[HTML・CSS] 説明リストdlのdtとddを横並びに表示する方法（コピペで使えるコード付き）

2025.09.05

SEARCH

CATEGORY

TAG