如何在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

这是您自己更新的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;
    }