如何使div右边界不占据全长和居中？

Question

我想给一个div 100px高度一个边框 - 右边80px高度和垂直居中（也可以是百分比）。这里有一个类似的帖子，答案很好：Any way to limit border length?但它并没有解决边界居中的问题。

Answer 1

使用伪元素：https://jsfiddle.net/Lecuw62a/

<div>
content
</div>

div {
  height: 100px;
  width: 100px;
  background: grey;
  position: relative;
}
div:before {
  content:  '';
  position: absolute;
  width: 4px;
  right: 0;
  height: 80%;
  background: black;
  top: 10%;
}

Answer 2

您可以使用此代码实现跨浏览器兼容性：

<style>
    .box {
        position:relative; width:300px; height:100px; background-color:#eee;
    }
    .right_border {
        position:absolute; z-index:99; top:10%; right:0px; height:80%; width:2px; background-color:#900; overflow:hidden;
    }
</style>
<div class=box>
    <div class=right_border></div>
</div>