CSS :: vor Pseudo-Element Zeilenhöhe?

Question

Mein Absatz hat eine Höhe/Zeilenhöhe von 50px und text-align: center, die den Text zentriert. Aber p: before bewirkt, dass es in der Höhe/Zeilenhöhe ansteigt, wodurch der Text nach unten gedrückt wird. Ich möchte sowohl p als auch p: vorher vertikal zentriert sein.

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

Die Textlänge variiert, so glaube ich nicht, dass ich nur position: absolute für das Symbol verwenden kann ...

Answer 1

Der Grund dies geschieht, ist, weil line-height durch die geerbte wird :before Elemente, die auch ein inline-block Element ist.

Man könnte dies durch Floaten des :before Inhalt lösen, damit es von der Strömung zu entfernen, ist es unabhängig von der line-height machen.

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

Es ist wirklich einfach. vor Element: Sie sollten

vertical-align: top;

zum geben.

Ihre aktualisierte jsFiddle: http://jsfiddle.net/Pz7vF/