A list of awesome references, articles, tutorials and videos to learn CSS ::before/::after pseudo elements. Update article of November 2018.
Table of Contents
::after: generated content pseudo-elements. It is often used to add cosmetic content to an element with the
::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
::after are contained by the element's formatting box, and thus don't apply to replaced elements such as
<img>, or to
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.
- ::before vs :before https://css-tricks.com
Note the double-colon
:beforeversus 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 Elementshttps://bryanlrobinson.com
It’s no secret that I’m a fan of
::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 Elementshttps://wpshout.com/
As they come up in my work,
:afterare a sort of fire escape, letting you quickly route around problems that could otherwise be quite.
Understanding the CSS "content" Propertyhttps://www.sitepoint.com
Gajendar Singh breaks down the CSS content property, with descriptions and demos for all the possible values.
Understanding Pseudo-Element :before and :afterhttps://www.hongkiat.com
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 Overlayshttps://bryanlrobinson.com
:afterelements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with
Building Animations With Pseudo-Elementshttps://medium.com
Every element possesses a
::afterpseudo-element, with the exception being elements that are self-closing. They live inside of the element; the
How to Create a Beautiful Animated Loader with Nothing but CSShttps://codeburst.io
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 Designshttps://medium.com
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…
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-Elementhttps://blog.teamtreehouse.com
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.1nicolasgallagher.com
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.
Text Underline Hover Effects
Quick experiments with
:afterhover effects on single line elements.
Animated Hamburger Menu
Animated hamburger menu using
Pseudo Element Hover Effect
overflow: hiddenoff of the a tag to see the
Pure CSS Counter
Counting up with
::aftercontent. A pure CSS counter is probably completely useless...but it is possible.
Credits - 10 Cloverfield Lane
I think it finally works in IE now! The scroll animation now works in IE - I had to avoid
:afterletters are hidden in IE - the "visible" of the pseudo-elements is not overriding the hidden of the parent like it should - I had to rely on color instead of visibility to hide some letters. - Abbey McTaggart