CSS ::before / ::after
A list of awesome references, articles, tutorials and videos to learn CSS ::before/::after pseudo elements.
- Browser Compatibility
- ::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
::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,
: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
:after elements 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
::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…
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
:after hover effects on single line elements.
Animated Hamburger Menu
Animated hamburger menu using
Pseudo Element Hover Effect
overflow: hidden off of the a tag to see the
Pure CSS Counter
Counting up with
::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 also
vh units. The
: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