【CSS】擬似要素で上下に縦線を作成する方法

今回は、「擬似要素で上下に縦線を作成する方法」について紹介します。

【CSS】擬似要素で上下に縦線を作成する方法

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

それでは早速コードを見ていきましょう!

HTML

CSS

h2に対して、「position: relative;」を指定し、beforeとafterを使って上下に縦線の擬似要素を作成します。

縦線の太さや高さや色はお好みに合わせて数値を変更してみてください。

まとめ

以上が、「擬似要素で上下に縦線を作成する方法」でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事