CSSで２つの要素の真ん中に縦線を引く方法を解説！

HTMLで2カラムの状態、つまり左と右側にブロックが分かれている状態で、その区切りとして中央に縦線を引きたい場合があります。

線といえばborderプロパティを真っ先に思い浮かべると思いますが、余白を上手く調整したい時にborderで線を引くと要素の間に対しては上手く引けない場合があります。

今回は下記のような状態を目指します。

今回はCSSで2つの要素の真ん中に縦線を引く方法を解説していきます。

それでは順番に2つの要素の真ん中に縦線を引く方法を解説していきます。

::afterの疑似要素を使って縦線を引いたサンプルコードは下記となります。

index.cssの中の枠線部分は.A:afterの箇所です。positionでrelativeを設定した.Aに対して、absoluteでleft: 100%としています。つまり.Aの右端に位置します。

更にwidth（ここでは線の太さ）を4pxとしてheightを100%とすることで枠線の様に見せています。

次に第三の要素（ここでは.lineとする）を用意し、間に挿入するやり方です。

.lineのdivタグを挿入することでAとBの間に要素が一つ入り、そのスタイルを縦線にすることでAとBの間の区切り線のように見せています。