A list of awesome references, articles, tutorials and videos to learn CSS ::before/::after pseudo elements. Update article of November 2018.
Table of Contents
::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
- The ::before and ::after pseudo-elementshttps://drafts.csswg.org
- The :before and :after pseudo-elementshttps://drafts.csswg.org
References
- ::before (:before)https://developer.mozilla.org
- ::after (:after)https://developer.mozilla.org
- ::after / ::beforehttps://css-tricks.com
- ::beforehttps://tympanus.net/codrops
- ::afterhttps://tympanus.net/codrops
Articles
- ::before vs :before https://css-tricks.com
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 Elementshttps://bryanlrobinson.com
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 Elementshttps://wpshout.com/
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" 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
Use
:after
elements 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-Elementshttps://medium.com
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 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…
-
Animating Pseudo-Elementshttps://cssanimation.rocks
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
:before
&:after
hover effects on single line elements. -
Animated Hamburger Menu
Animated hamburger menu using
::before
/::after
. -
Pseudo Element Hover Effect
Take
overflow: hidden
off of the a tag to see the:before
transition. -
Pure CSS Counter
Counting up with
::before
&::after
content. 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
calc
and alsovh
units. The:before
and:after
letters 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