Vertical divider line between columns using columnal css responsive framework - html

Question

I am using the columnal(http://www.columnal.com/) responsive grid framework and am trying to create a vertical divider line in between columns that will stay centered in the right margin as the viewport is resized.
I have tried a couple of solutions using background images and pseudo elements but neither has been successful. The right margin is used by the columnal framework so this can't be used as part of the solution which is why I think a vertically repeating background image or pseudo element is required.
I am also trying to avoid using additional html elements in the code, I would like to keep this as clean as possible. However if that's the only solution, then so be it.
Here's the HTML:
<div class="container">
<div class="row">
<div class="col_4 vertical_divider">
<div class="content">I want a vertical divider line to appear in the centre of the margin to the right of this grey box ->
<br/>
<br/>If you don't see columns to the right re-size this window to make it bigger.</div>
</div>
<div class="col_4 vertical_divider">
<div class="content">This example uses the Columnal responsive framework</div>
</div>
<div class="col_4 last">
<div class="content">Solution could be using a repeating image, pseudo elements or something else. I would like to avoid using additional html if possible. Solution should preferably be css applied to the 'vertical_divider' class.</div>
</div>
</div>
</div>
and here's the CSS:
* {
box-sizing: border-box;
}
.content {
background-color:#ddd;
min-height:400px;
padding:5px;
}
/* Solution preferably applied to this class */
.vertical_divider {
}
I've put it up as fiddle here which also includes a little more explanation:
http://jsfiddle.net/NtuZJ/12/

Answer 1

I've came up with a nice solution using :after pseudo class. The only disadvantage is that you have to specify half the size of the margin (to the right setting).
jsFiddle Demo
.vertical_divider:after {
background: red;
width: 1px;
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: -15px;
}