在网页中添加垂直分割线

2019-05-19  本文已影响0人  苗喵秒

使用方式:

<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

效果图


演示效果图
上一篇下一篇

猜你喜欢

热点阅读