文字に線の装飾をする際に使う「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;
}
Can I use
- https://caniuse.com/?search=text-decoration-thickness
- https://caniuse.com/?search=text-underline-offset