html - 使用 :before 添加与 float 列相同高度的行

Question

有没有办法在它旁边使用 :before 添加一条与 float 列高度相同的线。

我试过这样，但它确实跨越了边界，但没有跨越列的整个高度。

HTML

 <div class="col-xs-12">
   <a href="#"><img src="../img/spv/more-ideas/more-ideas3.jpg" / alt=""></a>
       <div class="product-details">
           <a href="#">Outfit ansehen &raquo;</a>
      </div>
 </div>

CSS

.col-xs-12{
    float: left;
    position:relative;
 }

.col-xs-12:before{
    content:"";
    display:block;
    height:100%;
    border-left:1px solid #ccc;
    position:absolute;
}

Answer 1

不要使用高度 100% 来对抗未指定高度的父级，因为你是绝对定位使用 top 和 bottom 值:

.col-xs-12{
    float: left;
    position:relative;
 }

.col-xs-12:before{
      content:"";
      display:block;
      top:0;
      bottom:0;
      border-left:1px solid #ccc;
      position:absolute;
}

但是，如前所述，您应该避免“扩展”默认 Bootstrap 类。将另一个类添加到该列并改用它。顺便说一下，如果您只是使用它来应用边框 - 为什么不直接在列本身上这样做呢？