CSS伪元素全高

Question

我喜欢使用CSS伪元素在DIV之前添加图标.我为此创建了一个JS小提琴.问题是,before伪元素不占用整个高度.我想它与div的高度相同.目前它只需要图标所需的高度.

<div class="icon"><p>Lorem Ipsum...</p><p>Lorem Ipsum...</p><p>Lorem Ipsum...</p><div>

http://jsfiddle.net/marcbaur/veq13ohs/

是否有人知道如何解决这个问题？

电贺

Answer 1

我想你想做这样的事情.请记住设置height为:before我用position: absolute,对上级position: relative.

.icon {
  background-color: blue;
  position: relative;
  padding-left: 54px;
  border: 1px solid red;
}
.icon:before {
  width: 50px;
  display: block;
  content: url("http://www.alsacorp.com/catalog/images/C_world_icon.jpg");
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

<div class="icon">
  <p>Lorem Ipsum...</p>
  <p>Lorem Ipsum...</p>
  <p>Lorem Ipsum...</p>
<div>