Post thumbnail: CSS ::before / ::after

CSS ::before / ::after

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.

Example 1. ::before for HTML tag h1:


See the Pen ::before / ::after simple example by freefrontend.com (@cssparadise) on CodePen.

Example 2. ::before and ::after for HTML tag h1:


See the Pen ::before / ::after simple example by freefrontend.com (@cssparadise) on CodePen.

Example 3. Unicode simbols with ::before and ::after


See the Pen unicode simbols with ::before / ::after example by freefrontend.com (@cssparadise) on CodePen.

Specifications

References

Articles

back to top