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

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

2 Answers

Codepen

Give this a go:

html

<div></div> 

css

div { width: 200px; height: 200px; border: red 1px solid; position: relative; } div:after { content: ''; position: absolute; border-right: 2px green solid; height: 200px; width: 200px; transform: translateX(-50%); } div:before { content: ''; position: absolute; border-bottom: 2px green solid; height: 200px; width: 200px; transform: translateY(-50%); } 

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