TestMyCSS- try the CSS performance tool

Tips and Tricks
CSS ::before pseudo-element line-height?
Jan 18, 2016

CSS ::before pseudo-element line-height?

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.

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;
}
The text length varies so I don’t think i can just use position: absolute for the icon…

solution
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.

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;
}
TestMyCSS
TestMyCSS
[email protected]
sitemap
lfender6445
lfender6445
TestMyCSS Optimize CSS performance by checking for redundancy, validation errors, and following best practices