在网页中添加垂直分割线

使用方式：

<div class="parent">
  <div class="vertical-line"></div>
<div>
.parent{
  position: relative;
}
.vertical-line{
  margin-right: 10px;
  margin-left: 10px;
}
.vertical-line::after {
  content: '';
  top: 0;
  bottom: 0;
  position: absolute;
  border-right: 1px solid #cccccc;
}

注意事项
垂直分割线(应用vertical-line类的标签)的父元素定位方式不能是static

position属性值的区别请参考https://www.runoob.com/cssref/pr-class-position.html

效果图

演示效果图