высота строки не работает с :: перед псевдоэлементом

#html #css #pseudo-element

#HTML #css #псевдо-элемент

Вопрос:

Кажется, что каждое свойство, которое я тестировал с помощью ::before, работает, кроме line-height . Он согласован во всех браузерах. Я не вижу этого в спецификации. Я делаю что-то не так? Если нет, есть ли чистое обходное решение для этого? Я хотел бы другую высоту строки для тела div и ::before . РЕДАКТИРОВАТЬ: после дальнейших исследований кажется, что это работает, если высота строки больше, чем высота строки DIV, но не меньше. Это определенно похоже на ошибку. Я добавил четвертый DIV, чтобы продемонстрировать это.

HTML:

 <div id="content1">content<br />content<br />content<br /></div>
<div id="content2">content<br />content<br />content<br /></div>
<div id="content3">content<br />content<br />content<br /></div>
<div id="content4">content<br />content<br />content<br /></div>

CSS:

 div
{
display: inline-block;
height: 150px;
line-height: 20px;
width: 110px;    
}

div::before
{
color: red;
content: "before a before a before a";
font-family: courier new;
font-size: 10px;
letter-spacing: 10px;
white-space: pre;
}

#content1::before
{
line-height: 10px;
}

#content2::before
{
line-height: 8px;
}

#content3::before
{
line-height: 6px;
}

#content4::before
{
line-height: 30px;   
}

http://jsfiddle.net/ThinkingStiff/weGGn/

Ответ №1:

Вы должны определить line-height div , потому div:before что принимает div line-height , а не :before div . Итак, напишите так:

 div:before
{
    color: red;
    content: "before a before a before a";
    font-family: courier new;
    font-size: 10px;
    letter-spacing: 10px;
    white-space: pre;
}
div{
     line-height: 10px;
 }

Проверьте это: http://jsfiddle.net/sandeep/weGGn/3 /‘

Ответ №2:

Некоторые дополнения к ответу @sandeep:

Свойство Line -height, по-видимому, работает одинаково в большинстве новых браузеров. Вы можете столкнуться с проблемой с браузером Windows Phone (например, с использованием Nokia Lumia 920), который выбирает свойство line-height элемента и применяет его как к элементу, так и к его псевдо (:before, :after) .

Итак, суть в том, что вы присваиваете значение высоты строки в самом элементе и используете line-height: inherit для псевдо, который работает как кроссбраузерная вещь. Возможно, вам также придется попробовать и посмотреть, работает ли это для вас.