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

Question

我有这样一行objects/elements：

我想创建一条线，并将其放置在我所有对象的后面，如果我的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;
    }

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

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

css

less

border