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

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

完成形はこちらです。

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

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

HTML

<h2>擬似要素</h2>

CSS

h2 {
  position: relative;
  display: inline-block;
  font-size: 20px;
  height: 65px;
  line-height: 65px;
}

h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 2px;
  height: 20px;
  margin: auto;
  background-color: black;
}

h2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  height: 20px;
  margin: auto;
  background-color: black;
}

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

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

まとめ

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