【CSS】擬似要素を用いて線を引く方法

Web制作

 

 

コーディングをしていると、たまに見出し等に以下のような線がくっついたデザインと出くわすことがあります。

HTMLで表現してもいいのですが、今回は擬似要素before,afterを用いてCSSのみで簡単に表現してみます。

 

以下、記事に入ります。

 

擬似要素を用いた線の引き方

まずはHTMLを用意します。今回は簡単に見出しを1行。

 

CSSも少しだけ設定します。

見やすくするためのmarginと、font-sizeとfont-weightを適当に。

 

ページを開くと以下のような見出しができています。

では、ここから線を引いていきましょう。

 

上線

見出しの上に線を引く場合、線は見出しの前に存在することになります

そのため、要素を前に配置するbeforeを使いましょう。

 

beforeを使用してh2の前に線を引いたCSSがコチラ。

 

ページを開いてみるとこんな感じ。

 

以下、コードの中身について解説します。

 

contentはbefore擬似要素とafter擬似要素のみに使えるプロパティです。

擬似要素のコンテンツを決めるプロパティで、これがないとbefore,afterに何を設定しても空っぽになってしまいます

 

例えば文字を入れたい場合はcontent: 'テキスト';、画像を入れたい場合はcontent: 'img/sample.jpg';と指定します。

 

今回は文字も画像も入れないので、contentの中身は空でOKです。

before,afterを使うときは中身は空でもいいので、content自体はとりあえずつけておきましょう

 

今回は上に線を引きたいので、要素を縦並びさせる必要があります

ブロック要素にすると縦並び、インライン要素にすると横並びになるので、今回はdisplay:blockでブロック要素にして縦並びにさせています

 

backgroundで線の色、heightで線の高さ、widthで線の長さを決めています。

ここは引きたい線に応じて適宜調節してください。

 

線と文字の間隔を調整しています。

もし逆に近づけたいなら、margin-bottom: -10px のようにマイナス指定してあげれば近づきます

 

margin-bottom: -10px;を入れるとこんな感じ。

 

下線

下線はh2の後ろに存在するため、今度はafterを使いましょう。

後は上線とほぼ同じ。

marginの指定がbottomからtopになった点だけ気をつけましょう。

 

左線

上線と同様、左線も見出しの前に存在するコンテンツです。

そのためbeforeを使って表現していきます。

 

以下、CSSのコード。

 

ページを開くと以下の画像のように線が引かれています。

 

以下、コードの解説。

 

先ほど説明した通り、ブロック要素は縦並びでインライン要素は横並びです。

今回は横並びにしたいので、display: inline-blockでインライン要素にします。

 

backgroundは線の色で変わらずですが、heightとwidthは上下線のときと関係が入れ替わっています

heightが線の高さwidthが線の幅になっているので注意。

 

contentとmarginは上下線のときと同様ですね。

 

右線

下線のときと同様、線が見出しの後ろに来るのでafterを使います。

後は左線とほぼ同様。

 

marginの指定がleftに変わった点だけ注意。

 

まとめ

今回は線を引くことに焦点を当てましたが、画像やアイコンの設置なんかにも使えます。

今まで擬似要素についてよくわかっていなかった方は、これを機に使い方を覚えてみましょう٩( 'ω' )و