Cacher is the code snippet organizer for pro developers

CSSの疑似要素という機能を利用する。
疑似要素はHTMLソースには現れない。
以下のクラスを指定した要素の後に縦線を追加する。

.vdivider-right:after{
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #f7f7f7;
  width: 1px;
  content: "";
  display: block;
  position: absolute;
  top :0;
  bottom: 0;
  right: 0;
  height: 100vh;
}

逆に指定した要素の前に縦線を追加する場合は以下。
上記とは違いleft:0を指定していることに注意。

.vdivider-left:before{
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #f7f7f7;
  width: 1px;
  content: "";
  display: block;
  position: absolute;
  top :0;
  bottom: 0;
  left: 0;
}