A list of awesome references, articles, tutorials and videos to learn CSS ::before/::after pseudo elements. Update article of November 2018.

Table of Contents

  1. Specifications
  2. References
  3. Articles
  4. Tutorials
  5. Examples
  6. Videos
  7. Browser Compatibility

::before and ::after: generated content pseudo-elements. It is often used to add cosmetic content to an element with the content property.

::before represents a styleable child pseudo-element immediately before the originating element’s actual content. ::after represents a styleable child pseudo-element immediately after the originating element’s actual content.

The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.

In CSS1-2, pseudo-elements were preceded by single colons, just as pseudo-classes were. In CSS3, pseudo-elements use double colons to distinguish them from pseudo-classes.

Specifications

References

Articles