3

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;
    
}

enter image description here

and narrowing the browser:

enter image description here

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?

Community
  • 1
  • 1
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • 1
    _“So, why just one line of paragraph is getting aligned?”_ – _because_ the pseudo element is displayed as `inline-block`, which means it resides within a normal _line_ of text. _“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”_ – nope, at least not in my test in Chrome – only one line is displayed at the bottom _within_ the border, all the rest is displayed outside of the element in the overflow area. – CBroe Apr 22 '15 at 10:17
  • yes, what I meant to say... – Bhojendra Rauniyar Apr 22 '15 at 10:17
  • But only one line of the paragraph is getting aligned, why? – Bhojendra Rauniyar Apr 22 '15 at 10:18
  • 1
    Nothing to do with the pseudo-element - a child element in the same location would behave the same. – BoltClock Apr 22 '15 at 10:19
  • possible duplicate of [http://stackoverflow.com/questions/14141374/using-css-before-and-after-pseudo-elements-with-inline-css] – Tanya Sinha Apr 22 '15 at 10:21
  • @BoltClock could you please give a demo without pseudo / – Bhojendra Rauniyar Apr 22 '15 at 10:21
  • 1
    @Tanya Sinha: This question doesn't even use inline styles. What makes you think that could conceivably be a duplicate? – BoltClock Apr 22 '15 at 10:22
  • @Bhojendra Nepal: https://jsfiddle.net/BoltClock/rx8b25vy/1 – BoltClock Apr 22 '15 at 10:22
  • @BoltClock Hmmm, ok. But why is this so? – Bhojendra Rauniyar Apr 22 '15 at 10:23
  • I'll write an answer. – BoltClock Apr 22 '15 at 10:24
  • _“But only one line of the paragraph is getting aligned, why?”_ – because the pseudo element is part of that line of “text” … same way, as if you had `
    Fake pseudo additional text …
    ` instead.     – CBroe Apr 22 '15 at 10:24

1 Answers1

3

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • @BhojendraNepal What part of the answer don't you understand? If you can be a little more specific we might be able to add clarity :-) – TylerH Jun 19 '15 at 05:57