Question

我有以下标记，我面临的问题是：在psuedo选择器之前，它不占用它所应用的元素的所有高度，即如插图所示，左边的红色边框应用于：之前没有完全占据高度。我需要它才能占据全高。我怎么能这样做，我一直在玩元素高度，行高与文本，但没有运气。

普兰克 - http://plnkr.co/edit/NPYntTDHeolsM89vYd2Y?p=preview

HTML：

  <body>
    <div>
      <section>

      </section>
    </div>
  </body>

CSS：

div, section{
  margin:0;
  padding:0;
}
div{
  background:yellow;
  width:200px; 
  height:30px;
}
section{
  background:green; color:white;
  width:50px;
  height:30px; float:right;
}
section:before{
  border-left:5px solid red;
  content:"";
}

Answer 1

由于你的元素有一个固定的高度，只需要将伪元素的高度设置为100％，但你还需要将它显示为一个块，因为默认情况下生成的内容是内联的：

section:before{
  border-left:5px solid red;
  content:"";
  display:block;
  height:100%;
}

css边框样式：在选择器未达到全高度之前

1 个答案: