我的段落的高度/行高为50px,text-align：center是文本的中心.但是p：之前导致它的高度/行高增加,导致文本崩溃.我想要p和p：在垂直居中之前.
<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;
}
文字长度各不相同所以我认为我不能只使用位置：绝对的图标…
解决方法
发生这种情况的原因是因为line-height由：before元素继承,它们也是一个内联块元素.
您可以通过在内容之前浮动：来解决此问题,从而将其从流中移除,使其不受行高影响.
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;
}
