How I Made The NIKE Logo Using A Single HTML Element — Or How I Thought Inside The Box And Found Two More.

CSS Visual Dictionary

For over a decade we have been taught the CSS Box Model as that image that shows up in Chrome’s Developer Tools:

Figure 1: CSS Box Model integrated in Chrome’s JavaScript console pane under Developer Tools panel.

Will The Fake HTML Element Please Sit Down —

The image above has been embedded into the psyche of the large majority of web developers. But surprisingly this representation of an HTML element is not 100% entirely accurate. Shocking, I know.

Along Came :before and :after Pseudo Selectors

The :before and :after CSS pseudo-selectors refer to two uniquely separate HTML element entities contained within the same HTML tag!

Yes, Every HTML Element Is Actually 3 Unique And Separate HTML Elements.

This creates opportunities for saving a meaningful amount of bandwidth. Because you get two more div pairs (<div></div><div></div>) for free.