How can I create a border in the middle of the div (horizontally)?

Question

I have a line of objects/elements like this:

I want to create a line, and place it behind all my objects, in the center if my div.

Here is what I'm hoping to make:

To create a border on top, right, bottom, left, or around a div is quite simple, but in the middle of the div is surprisingly hard. I've been trying to research on this, but I don't see any good one so far.

Any CSS expert want to show off your CSS skill?

Fiddle

Answer 1

Here is your own updated JSFiddle

.border-center { 
            width: 100%;
            border: red 1px solid;
            position: relative;
        }

.border-center:before { content: '';
        position: absolute;
        bottom: 50%;
        border-bottom: 2px green solid;
        width: 100%;
        z-index:0;
    }