CSS ::before伪元素的line-height是什么意思？

Question

我的段落高度/行高为50像素，同时使用text-align:center属性使文本居中。但是

: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 来放置图标...

- Sunny

---

有趣的问题。长度变化的是什么？鼠标悬停时的文本还是悬停前的实际文本？ - Josh Crozier

我只是在说，我不能使用position: absolute来放置图标，因为文本不总是相同的，而且我需要将图标放在文本旁边。 - Sunny

看看这个fiddle，http://jsfiddle.net/MMAUy/1/ 我去掉了高度。似乎伪元素正在向盒子添加一些高度...有什么想法吗？ - Sunny

Answer 1

出现这种情况的原因是line-height被:before元素继承了，而:before元素也是一个inline-block元素。

您可以通过浮动:before内容来解决这个问题，从而将其从流中删除，使其不受line-height的影响。

这里有 jsFiddle 示例

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

- Josh Crozier

---

使用float是个好主意。我仍然想知道是否有一种方法可以在不添加额外标记的情况下实现这一点？ - Sunny

Answer 2

非常简单，您应该将

vertical-align: top;

应用到:before元素。

您更新后的jsFiddle链接：http://jsfiddle.net/Pz7vF/

- user3554720

Answer 3

对我有效的一种方法是使用!important，只要在元素中尚未使用它。

element {
  line-height : 110%;
}

element::before {
  content : "HI";
  line-height : 40px !important;
}

- Raid