Swim left; ambiguity - CSS

Question

Let's take two images as an example.

With float: left;

Without float: left;

HTML

 <h6><span>Sign Up</span></h6> 

CSS

 h6:before { content: url("images/arrow.png"); padding-right: 8px; float: left; // Here lies problem } 

Question

Why without float: left; text (registration) does not work? What science is behind this?

Answer 1

The default display mode for the pseudo-element display: inline; , and the default vertical alignment is vertical-align: baseline; . This means that the image will be aligned with the baseline of the text.

When you float an element, its display mode becomes display: block; , and it is removed from the document flow. Vertical alignment is no longer a factor, in which case the top edge of the span now aligned with the top edge of the floating pseudo-element.

As mentioned by Louis P.A. and Paulie_D in the comments, changing the vertical alignment will align the non-floating pseudo-element with the middle of the text:

 h6:before { content: url("http://placehold.it/20x20"); display: inline-block; padding-right: 8px; vertical-align: middle; } h6 span { vertical-align: middle; } 

 <h6><span>Sign Up</span></h6>