Question

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 1

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/‘