如何在div中间（水平）创建边框？

Question

我有一行像这样的对象/元素：

我想创建一条线，并将置于所有对象后面，中心，如果我的div。

这是我希望做的：

要在div的顶部，右侧，底部，左侧或周围创建边框非常简单，但在div的中间却非常难。我一直在努力研究这个，但到目前为止我看不到任何好的。

任何CSS专家都想展示你的CSS技能吗？

Fiddle

Answer 1

Codepen

放手一搏：

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

Answer 2

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