html - 列之间的可视编辑器分隔线

我正在使用Visual Composer插件，它使创建列变得容易。我遇到了要创建Sepa的问题

html,body { height:100%;width:auto;}

.left {
float: left;

}
#w1 {width:22%;
background-color:#009;
    margin-right: 4%;

}
#w2{width:48%;
background-color:#9F3;
    margin-right: 4%;
}
#w3{ width:22%;
background-color:#30C;}

<div class="left" id="w1">TEST</div>
<div class="left" id="w2">TEST</div>
<div class="left" id="w3">TEST</div>

列之间的rator线如何轻松实现？我已经重新创建了下面三列的设置方式：

最佳答案

您可以使用:after：pseudo-elements。

html,
body {
  height: 100%;
  width: auto;
}
.left {
  float: left;
  position: relative;
}
#w1 {
  width: 22%;
  background-color: #009;
  margin-right: 4%;
}
#w2 {
  width: 48%;
  background-color: #9F3;
  margin-right: 4%;
}
#w3 {
  width: 22%;
  background-color: #30C;
}
.left:not(:nth-of-type(2)):after {
  content: '';
  position: absolute;
  right: -10%;
  top: 0;
  height: 100%;
  width: 2px;
  background: black;
}
.left:last-of-type:after {
  right: 108%;
}

<div class="left" id="w1">TEST</div>
<div class="left" id="w2">TEST</div>
<div class="left" id="w3">TEST</div>

关于html - 列之间的可视编辑器分隔线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27689045/