text-decorationの調整

2021.08.31

文字に線の装飾をする際に使う「text-decoration」で、
線の太さや文字との間隔を調整する方法。

ただ、ブラウザや単位に制限があるので要注意。

.anchor{
	text-decoration: underline;
	text-decoration-thickness: .2rem;
	text-underline-offset: .3rem;
}

線の太さ

「text-decoration-thickness」で線の太さを指定できます。

文字文字文字もじもじもじモジモジモジMOJIMOJIMOJI

.hoge{
	text-decoration: underline;
	text-decoration-thickness: 5px;
}

「text-underline-offset」で線の太さを指定できます。

文字文字文字もじもじもじモジモジモジMOJIMOJIMOJI

.hoge{
	text-decoration: underline;
	text-underline-offset: 3px;
}