Question

我的段落的高度/行高为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;
}

文字长度各不相同，所以我认为我不能只使用position: absolute作为图标...

Answer 1

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

Answer 2

这很简单。你应该给

vertical-align: top;

到：before元素。

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

Answer 3

只要您尚未在元素中使用它，对我有用的东西就是使用！important。

element {
  line-height : 110%;
}

element::before {
  content : "HI";
  line-height : 40px !important;
}

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

3 个答案: