CSS :: before pseudo-element line-height?

Question

내 단락의 높이/줄 높이가 50px이고 텍스트가 가운데에 맞춰진 text-align: center입니다. 그러나 p : before는 높이/줄 높이가 증가하여 텍스트가 부딪치게됩니다. 나는 p와 p를 모두 수직으로 중심에두기를 원한다. line-height이 상속되고 있기 때문에

http://jsfiddle.net/MMAUy/

<p>Hover This</p> 

p { 
    background: red; 
    text-align: center; 
    height: 50px; 
    line-height: 50px; 
    font-size: 14px; 
} 

p:hover:before { 
    content: "icon"; 
    display: inline-block; 
    margin-right: 10px; 
    font-size: 3em; 
} 

텍스트 길이가 너무 차이 나는 그냥 아이콘 position: absolute를 사용할 수 있다고 생각하지 않습니다 ... 이런 일이 발생

Answer 1

이유는있다 :before 요소이며 inline-block 요소입니다.

:before 콘텐츠를 플로팅하여이 문제를 해결할 수 있습니다. 흐름에서 제거하여 line-height의 영향을받지 않습니다.

jsFiddle here

HTML

<div> 
    <p>Hover This</p> 
</div> 

CSS

div { 
    background: red; 
    height: 50px; 
    line-height: 50px; 
    font-size: 14px; 
    text-align:center; 
} 

div:hover p:before { 
    content: "icon icon icon icon"; 
    margin-right: 10px; 
    font-size: 42px; 
    float:left; 
} 
p { 
    display:inline-block; 
    margin:0px; 
} 

Answer 2

정말 간단합니다. 요소 앞에 : 당신은에

vertical-align: top;

를 제공해야합니다.

업데이트 된 jsFiddle : http://jsfiddle.net/Pz7vF/