CSS 유사 요소 전체 높이

Question

DIV 앞에 아이콘을 추가하기 위해 CSS 유사 요소를 사용하고 싶습니다. 나는 그것을 위해 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

나는 이런 식으로하고 싶다고 생각합니다. :before에 대해 height을 설정하는 데 유의하십시오. 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>