CSS Pseudo Element Full Height

Question

I like to use CSS pseudo elements to add an icon before the DIV. For this, I created a JS script. The problem is that before the pseudo-element doesnt occupy the entire height. I like that it has the same height as the div. Currently, only the height required by the icon is required.

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

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

Does anyone have any ideas how to fix this?

greets

Answer 1

I think you want to do something like this. Remember that for the installation heightfor :beforeI used position: absoluteand for the parent 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>

Run codeHide result