如何用css控制border 的长度？

Question

想要实现以下的效果：

Answer 1

这个很多方法实现，不是用的border。推荐伪元素：after

Answer 2

你把这个小横线不要当成border，而是把它当成一个背景色充满的很小的div块，这样你可以随意改变这个div的大小 形状 长短，比较方便

Answer 3

给个思路，在外元素里嵌套一个专门做border的内元素

<style>
  .box{
    width:100px;
    height:100px;
    background-color:#ccc
  }
  .box-border{
    position:relative;
    left:25px;
    width:50px;
    height:100px;
    border-bottom:1px solid #000;
  }
</style>

<div class="box">
  <div class="box-border">
  </div>
</div>