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 ::在僞元素行高之前？

回答

相關問題