CSS :: sözde eleman çizgisi yüksekliğinden önce mi?

Question

Paragrafım, metni ortalayan 50 piksel ve text-align: center yükseklik/çizgi yüksekliğine sahiptir. Ancak p: önce, metnin küçülmesine neden olarak, yükseklik/çizgi yüksekliğinde artışa neden oluyor. Hem p hem p: dikey olarak ortalanmadan önce istiyorum. line-height miras ediliyor çünkü

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; 
} 

metin uzunluğu değişir kadar ben ben sadece simge için position: absolute kullanabilirsiniz sanmıyorum ... Bu durumda

Answer 1

nedeni vardır inline-block öğesi olan :before öğesi.

Bunu, :before içeriğiyle yüzer biçimde çözebilir, böylece akıştan kaldırarak, line-height etkilemez.

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

Gerçekten basit. öğesinden önce: Sen hiç

vertical-align: top;

vermelidir. http://jsfiddle.net/Pz7vF/