HTML / CSSで好きな位置に下線を引く方法

Web制作

 

「HTML / CSSでアンダーバーを引くとき、好きな位置に指定したい・・・」

今回はそんな問題をてっとり早く解決する方法を紹介します。

 

spanタグを使用する

一番手っ取り早いのはspanタグを使用することです。コードを実際に見てみましょう。

下線を引きたい部分をspanタグで囲みます。

 

border-bottomで下線を引きpaddingで高さを調整します。

このコードを実行すると以下のようになります。

これで、好きな範囲で好きな位置に下線が引けました。

 

background-colorを応用する

こちらは応用編で、HTMLを一切いじらずにCSSコードだけで下線を引きます。

HTMLは手を加えません。

 

結果はこちらの通りです。

CSSで、pの後ろに擬似要素を付け加え、background-colorやheightを指定します。

これにより、背景が1pxの要素を表示させることで、擬似的に下線を作ります

 

この方法のメリット

・HTMLをいじる必要が無い
・widthで長さを自由に指定できる

 

擬似コンテンツは色々応用することができるので、これを機に使用して見てはいかがでしょうか。