::before, ::after, and the content Property

A style sheet can put text and shapes on the screen that appear nowhere in the HTML. The browser does it by creating extra boxes that the style sheet asks for. These boxes are called pseudo-elements, because they behave like elements but do not exist in the document.

Two pseudo-elements do this work. ::before creates a box as the first child inside an element, before its content. ::after creates a box as the last child inside the element, after its content. Both boxes are inline by default, and the browser creates one only when the rule gives it a content property.