How does this pseudo element work?

Question

I don't want to modify the markup and I just want to know the reason behind the pseudo element that's how it works.

code demo

div{
    border: 1px solid #000;
    height: 300px;
    
}
div:before{
    content: "";
    height: 100%; 
    display: inline-block;
    vertical-align: middle;
    
}

and narrowing the browser:

So, why just one line of paragraph is getting aligned? If you try to use vertical-align: bottom; then you can see it would be at bottom and all lines of the paragraph would be there.

But I'm just curious to know why just one line of them is working with vertical align?

Answer 1

The height of your pseudo-element is 100% of the div. Since it is an inline-block :before pseudo-element, this increases the effective line height of the first line to 300px, while leaving the rest of the lines unaffected. The rest of the text on the first line is then affected by the vertical-align: middle on your pseudo-element, since it is on the same line as your pseudo-element. See section 10.8 of the spec.

If you change the line height of the :first-line pseudo-element instead of using a :before pseudo-element, you'll have a similar effect:

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

But the concept should be much clearer since you're actually styling the first line of text directly rather than using a pseudo-element to influence the first line box.