Building Icons With a Single HTML Element

With the arrival of ultra high definition screens (think Retina) new design challenges have arisen; you need to find ways to accommodate all devices. Take displaying icons for example. You could lean on serving images at 200%, or using SVG, but it’s also possible to build a surprising amount of graphics with CSS alone. Let’s build an elaborate icon with just one HTML element.

The main problem with single elements resides in the fact that you’re limited to the number of “building blocks” you can use. Luckily, there are some tricks.
Pseudo Elements
Pseudo elements (also referred to as generated content) don’t exist in the document markup itself (the DOM) but are created by the CSS. They offer you the possibility to add to your default element two others which can (more or less) use the same properties. For example, take this markup <div class="square"></div> and apply the following style rules. For the purpose of this exercise Vincent Durand will use pixel values, though it’s often advisable to use flexible units of measurement such as ems. Note: The double colon (::), as opposed to a single colon, is CSS3 syntax. It differentiates pseudo elements from pseudo selectors, such as :hover.