mooonli mooonli - 1 year ago 138
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>

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


Answer Source

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("");
  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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download