Specifications

• The ::before and ::after pseudo-elements | W3C
• The :before and :after pseudo-elements | W3C

CSS References

• ::before (:before) | MDN
• ::after (:after) | MDN
• ::after / ::before | CSS-Tricks
• ::before | Codrops
• ::after | Codrops

Articles

• ::before vs :before | CSS-Tricks

  Note the double-colon ::before versus the single-colon :before. Which one is correct? Technically, the correct answer is ::before. But that doesn't mean...

• Top 3 Uses for the ::before and ::after CSS Pseudo Elements | bryanlrobinson

  It’s no secret that I’m a fan of ::before and ::after pseudo-elements. I use them to great effect for creating darkened overlays in this previous post. They have so many uses beyond that, though...

• Three Practical Uses of the :before and :after CSS Pseudo Elements | WPShout!

  As they come up in my work, :before and :after are a sort of fire escape, letting you quickly route around problems that could otherwise be quite.

• Understanding the CSS "content" Property | Sitepoint

  Gajendar Singh breaks down the CSS content property, with descriptions and demos for all the possible values.

• Understanding Pseudo-Element :before and :after | Hongkiat

  Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document.

Tutorials

• How To: Use CSS :after Pseudo-Elements to Create Simple Overlays | bryanlrobinson

  Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-mode!

• Building Animations With Pseudo-Elements | Medium

  Every element possesses a ::before and ::after pseudo-element, with the exception being elements that are self-closing. They live inside of the element; the ::before pseudo-element belongs…

• How to Create a Beautiful Animated Loader with Nothing but CSS | coderburst

  An example of how creative you can be with pseudo-elements and keyframe animations. Used in this case to build a loader animation without the need to fetch any JS or images.

• How to Use CSS3 Pseudo-Elements to Create Asymmetrical Designs | Medium

  Asymmetric or diagonal elements and non-right angles have gained traction with web designers in recent years. Luckily for us developers, they are also fairly straightforward to implement. If your…

• Animating Pseudo-Elements | CSS Animation

  Pseudo-elements are like getting extra DOM elements for free. They allow us to add extra content, decoration and more to our pages without adding extra HTML,...

• Customize Ordered Lists with the ::before Pseudo-Element | treehouse

  In fact, after this tutorial, you’ll be able to change fonts, colors and nearly every other style attribute of numbers in lists.

• Multiple Backgrounds and Borders with CSS 2.1 | Nicolas Gallagher

  Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning.

Videos

Browser Compatibility