CSS ::before伪元素行高？答案

【问题标题】：CSS ::before pseudo-element line-height?CSS ::before伪元素行高？
【发布时间】：2013-10-26 16:08:31
【问题描述】：

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

<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 作为图标...

【问题讨论】：

有趣的问题。什么长短不一？悬停时的文字，还是悬停前的实际文字？
我只是说我不能使用 position: absolute 作为图标，因为文本并不总是相同的，我需要文本旁边的图标。
看看这个小提琴，jsfiddle.net/MMAUy/1我去掉了高度。看起来伪元素给盒子增加了一些高度......有什么想法吗？

标签： html pseudo-element css css-content

【解决方案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;
}

【讨论】：

浮动的好主意。我仍然想知道是否有办法在不添加额外标记的情况下完成此操作？

【解决方案2】：

这真的很简单。你应该给

vertical-align: top;

到 :before 元素。

你更新的 jsFiddle：http://jsfiddle.net/Pz7vF/

【讨论】：

【解决方案3】：

对我有用的是使用 !important，只要您还没有在元素中使用它。

element {
  line-height : 110%;
}

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

【讨论】：