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。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;