CSS ::before伪元素行高？

Posted 2023-03-05

【中文标题】CSS ::before伪元素行高？

【英文标题】：CSS ::before pseudo-element line-height?

【发布时间】：2013-10-26 16:08:31

【问题描述】：

我的段落的高度/行高为 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 作为图标...

【问题讨论】：

有趣的问题。什么长短不一？悬停时的文字，还是悬停前的实际文字？

我只是说我不能使用 position: absolute 作为图标，因为文本并不总是相同的，我需要文本旁边的图标。

看看这个小提琴，jsfiddle.net/MMAUy/1我去掉了高度。看起来伪元素给盒子增加了一些高度......有什么想法吗？

【参考方案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;