CSS ::before pseudo-element line-height?
10,180
The reason this occurs, is because line-height
is being inherited by the :before
elements, which is also an inline-block
element.
You could solve this by floating the :before
content, thus removing it from the flow, rendering it unaffected by the line-height
.
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;
}
Author by
Sunny
Updated on June 05, 2022Comments
-
Sunny almost 2 years
My paragraph has a height/line-height of 50px and
text-align: center
, which centers the text. But p:before is causing it to increase in height/line-height, causing the text to bump down. I want both p and p:before to be vertically centered.<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; }
The text length varies so I don't think i can just use
position: absolute
for the icon... -
Sunny over 10 yearsGood idea with the float. I still wonder if there's a way to accomplish this without adding additional markup?