mooonli mooonli - 2 months ago 6
CSS Question

CSS Pseudo Element Full Height

I d'like to use CSS pseudo elements to add an icon before a DIV. I created a JS Fiddle for that.
The problem is, that the before pseudo element doesnt takes the whole height. I d like that it has the same height as the div. Currently it only takes the height needed by the icon.

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


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

Is there someone having an idea on how to fix this?

Greets

Answer

I think you want to do something like this. Keep in mind for setting height for :before I have used position: absolute and 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>

Comments