CODEWITHSUNDEEP
htmlcsspseudo-element
ThinkingStiff
ThinkingStiff

Reputation: 65351

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/

Upvotes: 5

Views: 3666

Answers (2)

sandeep
sandeep

Reputation: 92793

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

Upvotes: 8

KQI
KQI

Reputation: 320

Some additions to @sandeep answer:

Line-height property is apparently working the same in most of the new browsers. You might face a problem with Windows Phone browser (i.e. using Nokia Lumia 920) which picks the element's line-height property and applies it to both the element and its pseudo (:before, :after).

So the bottom line is, you assign the line-height's value in the element itself and use line-height: inherit for the pseudo that works as a cross-browser thing. You may need to try it also and see if it works for you.

Upvotes: 4

Related Questions