CSS: перед псевдо-элементом line-height?

мой абзац имеет высоту / высоту строки 50px и text-align: center, который центрирует текст. Но p: before вызывает увеличение высоты / высоты строки, заставляя текст ударяться вниз. Я хочу, чтобы p и p:прежде чем быть вертикально центрированным.

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;
}

длина текста варьируется, поэтому я не думаю, что могу просто использовать position: absolute значок...

7
css css-content html pseudo-element

2 ответов

причина этого происходит, потому что line-height наследуется :before элементы, которые также являются inline-block элемент.

вы можете решить эту проблему, плавая :before содержание, таким образом извлекая его из потока, делая его незатронутым line-height.

jsFiddle здесь

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;
}
12

это очень просто. Вы должны дать

vertical-align: top;

к элементу: before.

ваш обновленный jsFiddle: http://jsfiddle.net/Pz7vF/

5