【CSS】文字の下にだけ装飾をつける

文字の下にだけ装飾をつける方法

divタグやh2タグ、h3タグの下にボーダーなどで装飾したい場合、そのまま普通にborder-bottomなどで装飾をすると幅いっぱいまで広がってしまいます↓

方法1：display:inline-blockをつける

CSS

h2タグにinline-blockをつけてインラインブロック化します。
これで幅いっぱい広がってしまうことを防ぐことができます。

方法2：spanタグで囲む

HTML

CSS

ブロック要素であるh2タグを、インライン要素であるspanタグで囲みます。
そしてそのspanタグに装飾することでテキスト部分の下にだけラインを引くことができます。

ラインの長さを変える・指定する場合

テキストのサイズではなく、ラインの長さを短くしたい&長くしたい場合は上記のやり方ではうまくいきません。

方法：擬似要素を使う

擬似要素::afterを使うことで実現できます。

widthでラインの長さ、heightで太さを指定します。