CSS Responsive Layouts Media Queries Understanding Breakpoints

hi can someone explain this css code plz ?

/************************* Clearfix *************************/

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

can someone tell what is the :before for and the *zoom:1 ? thanks you

2 Answers

Steven Parker
Steven Parker
204,010 Points

The ":before" selector (more commonly written with two colons, "::before") creates a pseudo-element as the first child of the otherwise selected element. See this MDN page for more information.

The "zoom" property affects the magnification of an element, and a value of 1 means "no magnification". But note that this property is non-standard and is not recommended for use on production sites Consider using "transform: scale()" (details on this MDN page) instead.

In addition to the non-standard "zoom" property, this code appears to have an issue in the definition of ".clearfix::before" being incomplete.

Yoke Lee
Yoke Lee
2,856 Points

In addition to what Steven said, the * before zoom indicates some CSS hack for .. I think older IE versions (8 or earlier, iirc) So that line *zoom: 1; is only intended to be read by the older IE (rip).