CSS ::before / ::after
A list of awesome references, articles, tutorials and videos to learn CSS ::before/::after pseudo elements.
Specifications
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
::beforeand::afterpseudo-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,
:beforeand:afterare 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.
-
How To: Use CSS :after Pseudo-Elements to Create Simple Overlays | bryanlrobinson
Use
:afterelements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them withblend-mode! -
Building Animations With Pseudo-Elements | Medium
Every element possesses a
::beforeand::afterpseudo-element, with the exception being elements that are self-closing. They live inside of the element; the::beforepseudo-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.