Expanding-Contracting Boxes

Rishabh

• 5967
• 10
• 0

This is a cool little experiment that I just found somewhere (not sure who made it) and thought of posting here. As you can see there are 5 boxes animating (just expanding and contracting). Basically the width and height are being changed with CSS3 Animations. Take a look at the full view for a better experience.

There is a cool little trick being used in this little creation that I came across for the first time today and it's pretty interesting. If you take a keen look, you'll find every letter being vertically and horizontally centered. Well the text has been horizontally centered easily using text-align: center; but the vertical centered nature uses a cool trick -

#A:before, #A:after, #B:before, #B:after, #C:before, #C:after, #D:before, #D:after, #E:before, #E:after {
    content:" ";
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

I am not sure why those properties with their respective values on the ::before and ::after pseudo-elements vertically center's the text, but well, it does it pretty well. If you have any idea why that happens, then please share in comments.

Related: