CSS :: trước chiều cao dòng phần tử giả?

Question

Đoạn của tôi có chiều cao/chiều cao dòng là 50px và text-align: center, nằm giữa văn bản. Nhưng p: trước đây làm cho nó tăng chiều cao/chiều cao dòng, làm cho văn bản giảm xuống. Tôi muốn cả p và p: trước để được căn giữa theo chiều dọc.

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

Chiều dài văn bản khác nhau vì vậy tôi không nghĩ rằng tôi chỉ có thể sử dụng position: absolute biểu tượng ...

Answer 1

Lý do điều này xảy ra, là vì line-height đang được thừa hưởng bởi các :before yếu tố, cũng là một yếu tố inline-block.

Bạn có thể giải quyết vấn đề này bằng cách thả nội dung :before, do đó xóa nội dung khỏi luồng, khiến nó không bị ảnh hưởng bởi 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

Nó thực sự đơn giản. Bạn nên cung cấp cho

vertical-align: top;

tới: trước phần tử.

Cập nhật của bạn jsFiddle: http://jsfiddle.net/Pz7vF/