Вертикальная разделительная линия между столбцами с использованием колоночного адаптивного фреймворка

Question

Я использую колоночную ( http://www.columnal.com/) адаптивную сеточную структуру и пытаюсь создать вертикальную разделительную линию между столбцами, которая останется центрированной по правому краю при изменении размера области просмотра.

Я попробовал несколько решений, используя фоновые изображения и псевдоэлементы, но ни одно из них не было успешным. Правая граница используется колоночной структурой, поэтому ее нельзя использовать как часть решения, поэтому я думаю, что требуется вертикально повторяющееся фоновое изображение или псевдоэлемент.

Я также пытаюсь избежать использования дополнительных HTML-элементов в коде, я хотел бы сохранить это как можно более чистым. Однако, если это единственное решение, пусть будет так.

Вот 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 <a href="http://www.columnal.com/">Columnal</a> 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>

и вот CSS:

* {
    box-sizing: border-box;
}

.content {
    background-color:#ddd;
    min-height:400px;
    padding:5px;
}

/* Solution preferably applied to this class */
.vertical_divider { 
}

Я изложил это как скрипку, которая также включает в себя немного больше объяснений:

http://jsfiddle.net/NtuZJ/12/

Answer 1

Я придумал хорошее решение, используя :after псевдо класс. Единственным недостатком является то, что вы должны указать половину размера поля (для правильной настройки).

jsFiddle Demo

.vertical_divider:after {
    background: red;
    width: 1px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -15px;
}