列之间的可视组合器分隔线

Question

我使用的是visual composer插件，可以轻松创建列。我遇到了一个问题，我想创建一个分色

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线如何以简单的方式完成？我重新创建了如下3列的设置：

Answer 1

您可以使用:after：伪元素。

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;