CSS ::在伪元素行高之前？

我的段落的高度/线条高度为50px，而text-align: center则以文字为中心。但是，p：之前正在导致它的高度/线高增加，导致文字碰撞。我希望p和p：之前都是垂直居中的。CSS ::在伪元素行高之前？

<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的图标...

来源

2013-10-17 Sunny

有趣的问题。长度有什么不同？悬停时的文字或悬停前的实际文字？ –

我只是说我不能使用位置：绝对的图标，因为文字不会总是一样的，我需要在文字旁边的图标。 – Sunny

看看这个小提琴，http://jsfiddle.net/MMAUy/1/我删除了高度。看起来像伪元素正在增加一些高度...任何想法？ – Sunny

发生这种情况的原因，是因为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; 
}

来源

2013-10-18 00:23:30

漂浮物的好主意。我仍然想知道是否有一种方法可以在不添加额外标记的情况下完成此任务？ – Sunny

这真的很简单。你应该给

vertical-align: top;

到：元素之前。

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

来源

2014-04-20 20:00:30 loneMind

CSS ::在伪元素行高之前？

回答

相关问题