html - CSS::before 伪元素行高？

Question

我的段落的高度/行高为 50 像素，text-align: center 使文本居中。但是 p:before 导致它增加高度/行高，导致文本向下倾斜。我希望 p 和 p:before 都垂直居中。

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元素。

您可以通过 float :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;
}