CSS Pseudo Element Полная высота

Question

Я действительно хотел использовать псевдо-элементы CSS, чтобы добавить значок перед DIV. Для этого я создал скрипт JS. Проблема в том, что перед псевдоэлементом doesnt занимает всю высоту. Мне нравится, что он имеет ту же высоту, что и div. В настоящее время он занимает только высоту, необходимую значку.

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

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

Есть ли кто-то имея представление о том, как это исправить?

Greets

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>