Why do the :before and :after pseudo-elements require a 'content' property?

Question

Given the following scenario, why does the :after selector require a content property to function?

Answer 1

Here are some references to various W3C specifications and drafts:

Selectors Level 3

The :before and :after pseudo-elements can be used to insert generated content before or after an element's content.

The :before and :after pseudo-elements

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The content property, in conjunction with these pseudo-elements, specifies what is inserted.

The content attribute

Initial: none

This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:

none - The pseudo-element is not generated.

---

The styling applied to ::before and ::after pseudo-elements affects the display of the generated content. The content attribute is this generated content, and without it present, the default value of content: none is assumed, meaning there is nothing for the style to be applied to.

If you don't want to repeat content:''; multiple times, you can override this simply by globally styling all ::before and ::after pseudo-elements within your CSS (JSFiddle example):

::before, ::after {
    content:'';
}