这个伪元素如何工作？

Question

我不想修改标记，我只是想知道伪元素背后的原因是什么。

code demo

div{
    border: 1px solid #000;
    height: 300px;

}
div:before{
    content: "";
    height: 100%; 
    display: inline-block;
    vertical-align: middle;

}

  

并缩小浏览器范围：

  

那么，为什么只有一行段落对齐？如果您尝试使用vertical-align: bottom;，那么您可以看到它位于底部，并且该段落的所有行都将在那里。

但我只是想知道为什么只有一行正在使用垂直对齐？

Answer 1

伪元素的高度是div的100％。由于它是一个内联块:before伪元素，这会将第一行的有效行高增加到300px，而其余行则不受影响。然后，第一行上的其余文本会受到伪元素vertical-align: middle的影响，因为它与伪元素位于同一行。请参阅section 10.8 of the spec。

如果您更改:first-line伪元素的行高而不是使用:before伪元素，那么您将a similar effect：

div {
    border: 1px solid #000;
    height: 300px;
}
div:first-line {
    line-height: 300px;
    vertical-align: middle;
}

但是这个概念应该更加清晰，因为你实际上直接设置了第一行文本的样式，而不是使用伪元素来影响第一个行框。