Visual composer seperator line between columns - html

Question

i'm using the visual composer plugin which makes it easy to create columns. i've reached a issue where i want to create a 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 line between the columns how can this be done in an easy way? I've recreated how the 3 columns are set up below:

Answer 1

You could use :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>