CSS :: before擬似要素の行の高さですか？

Question

私の段落の高さ/行の高さは50pxで、テキストは中央にあるtext-align: centerです。しかし、p：beforeは高さ/行の高さを増加させ、テキストをバンプダウンさせます。私は、pとpの両方を、垂直にセンタリングする前にしたい。

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

理由、line-heightはによって継承されているためであります: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/