ThinkingStiff ThinkingStiff - 13 days ago 9
CSS Question

line-height not working with ::before pseudo-element

It seems every property I tested with ::before works except line-height. It's consistent across browsers. I don't see this in the spec. Am I doing something wrong? If not, is there a clean workaround for this? I would like a different line-height for the body of the div and the ::before. EDIT: After further research, it seems it works if the line-height is larger than the DIV line-height, but not smaller. This definitely seems like a bug. I added a fourth DIV to demonstrate this.

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/

Answer

You have to define line-height on the div, because div:before takes div line-height, not :before div. So, write like this:

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

Check this: http://jsfiddle.net/sandeep/weGGn/3/'