html - line-height 不适用于::before 伪元素

Question

似乎我用::before 测试的每个属性都有效，除了行高。它在浏览器中是一致的。我在规范中没有看到这一点。难道我做错了什么？如果没有，是否有一个干净的解决方法？我想为 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/

Answer 1

你必须在 div 上定义 line-height，因为 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/ '