【線を自由自在に操る】擬似要素を使った線の引き方

はじめに

webサイトを作成するうえで、文字の装飾として頻繁に使うのが線（上下左右）です。

borderで作成する人も多いですが、今回は非常に便利である擬似要素を使った線の引き方について解説していきます。

事前準備編

なぜ擬似要素を使うのか

擬似要素に関しては以前記事で紹介しています。

擬似要素に関する記事はこちら

【Q&A】擬似要素ってなんで使うの？？

こちらの記事ですね。

擬似要素はざっくり言えば、「HTMLに記述しなくてもdivのような箱を作ったり、文字を入れたり、いろんなことができるもの」です

今回使う上で理解しておいていただきたいのが、::beforeと::afterの違いですね。

単語の通り、前に作るか後ろに作るかの違いです。

webは左上を基準にして作ります。

つまり、左右では左が、上下では上が::beforeになります。

反対に右と下が::afterになります。

displayについて

こちらに関しても以前紹介しています。

displayに関する記事はこちら

【初学者必見】displayについて知ろう！

displayは簡単に言えば「要素が最初から持っている属性みたいなもの」です。

ここをよく理解していないと、これから紹介する擬似要素を使った線の引き方が難しくなるかと思います

軽く説明しておくと、blockの場合は要素同士は縦に並びます。

inline-blockの場合は縦ではなく、横に要素同士が並ぶようになります。

この性質を使って上下左右の配置を決めていきます。

borderとは何が違うの？？

以前投稿した、様々な下線の引き方に関して少し紹介した記事をまずは読んでみて下さい。

文字の下線の引き方に関する記事はこちら

【Q&A】文字の下線の引き方

文字に対してborderを使用しても似たようなことはできます。

ただ、線が対象要素に依存するため不便なことが多いのです。

なので今回は擬似要素を使って線を引いていきます。

実践編

再度事前準備編でのポイントを確認しましょう。

上と左は::before、右と下は::after

diplay:blockは縦並び、inline-blockは横並びになる

このポイントを踏まえたうえで上下左右の線を作っていきましょう。

上の図のように①〜④で分けて解説していきます。

対象要素はh2とします。

①上線

上の線を作る場合の条件は以下の3つです。

上線でのポイント

対象要素に対して縦並びである(display:block)

対象要素に対して上に作る(::before)

横線なので、widthが線の長さ、heightが太さになる

３つめに関しては、横線の場合widthは線の長さなのでお好みで、heightは太さになるのであまり大きくしすぎない方がいいです。

この内容を踏まえ上線のコードを書いてみると

CSS


h2{
   position:relative;
}

h2::before{
   content:"";
   display:block;
   width:80px;
   height:3px;
   background-color:#0097A7;
   position:absolute;
   top:0;
   left:10px;
}

こんな感じですね。
表示結果は以下のようになりました。

②左線

①の上線の内容を理解できれば全て同じ原理で作ることができます。

左線の場合の条件は

左線でのポイント

対象要素に対して横並びである(display:inline-block)

対象要素に対して左に作る(::before)

横線なので、widthが線の太さ、heightが長さになる

この条件を考慮してコードを書くと

CSS


h2{
   position:relative;
}

h2::before{
   content:"";
   display:inline-block;
   width:3px;
   height:40px;
   background-color:#0097A7;
   position:absolute;
   top:-2px;
   left:-5px;
}

表示結果は左線が表示されます。

③右線

右線の場合の条件は

右線でのポイント

対象要素に対して横並びである(display:inline-block)

対象要素に対して右に作る(::after)

横線なので、widthが線の太さ、heightが長さになる

この条件を考慮してコードを書くと

CSS


h2{
   position:relative;
   display:inline-block;
}

h2::after{
   content:"";
   display:inline-block;
   width:3px;
   height:40px;
   background-color:#0097A7;
   position:absolute;
   top:-2px;
   right:-5px;
}

コードを見ればわかりますが、右線だけはh2に対してdisplay:inline-blockを追加指定しています。

理由は、absoluteの基準が「文字のすぐ右横じゃないから」です。

h2はblock要素です

なので今回はh2をinline-block要素にすることで解決しました。

MEMO

※なぜinline-blockで解決できるの？？って人はdisplayの記事を再度読んでください。

表示結果では右線が表示されます。

④下線

下線の場合の条件は

下線でのポイント

対象要素に対して縦並びである(display:block)

対象要素に対して下に作る(::after)

横線なので、widthが線の長さ、heightが太さになる

この条件を考慮してコードを書くと

CSS


h2{
   position:relative;
}

h2::after{
   content:"";
   display:block;
   width:80px;
   height:3px;
   background-color:#0097A7;
   position:absolute;
   bottom:0;
   left:10px;
}

表示結果では下線が表示されます。

実践編の補足

線の配置に関して

今回は線の配置はposition:absoluteで絶対配置を使いました。

他にも配置のやり方はあります。

marginなどで動かしたり、position:relativeでも大丈夫です

ただ、スマホなどのレスポンシブも考慮すると絶対配置の方が後々楽かなと思います。

線のサイズに関して

今回はwidth,heightを決めて、擬似要素に対してbackground-colorで線の色を決めました。（backgroundでも同じです)

実は今回のやり方では3行になりますが、２行で書く方法もあります。
（わかりにくいかなと思い今回は簡単なやり方にしました、、）

それはborderプロパティを使います。

例えば

CSS


h2::after{
   content:"";
   display:block;
   width:80px;
   height:3px;
   background-color:red;
   position:absolute;
   bottom:0;
   left:10px;
}

この先ほど紹介した下線のコードを置き換えると

CSS


h2{
   position:relative;
}

h2::after{
   content:"";
   display:block;
   width:80px;
   border-right:3px solod #0097A7;
   position:absolute;
   bottom:0;
   left:10px;
}

となります。

heightとbackground-colorの代わりにborder-rightを入れました。

注意

borderだけでも置き換え可能ですが、その場合border-rightとborder-leftの２つが反応するため、幅が指定したサイズの２倍になります。
なので、もしborderを使う場合は本来のpxの1/2のpxを指定しましょう。

今回はborder-rightを使いました。

縦線に影響するのはrightもしくはleftです。
なのでこれはどちらを指定しても同じ結果になりますので、お好みで大丈夫です。

borderに比べて、px数は本来のままで大丈夫です。

ただ、実践編で解説した①or④ではtopかbottom、②or③ではleftかrightに変更が必要なので少し考え方が難しくなります。