94 CSS Pseudo Elements
Pseudo-elements (::before, ::after) are indispensable tools for reducing HTML bloat and isolating decorative styles. This collection emphasizes their technical utility in functionally replacing multiple wrapper <div>s, focusing on precise positioning and mastering the content property - from inserting strings to generating purely graphical shapes. The demos showcase advanced techniques like dynamic content generation using attr() and leveraging pseudo-elements as the primary targets for performant CSS transitions and complex @keyframes animations. Mastering this foundation is crucial for writing cleaner, more semantic markup and boosting efficiency in modern, component-based architectures.
Last updated:
Little Details
A stylized nested to-do list employing advanced CSS pseudo-elements for custom markers and hover-based reveal logic for sub-tasks. JavaScript handles basic DOM manipulation for adding/removing items, while the dark UI features gradient borders and tooltip interactions.
Pure CSS Entity Visualizer
An automated text annotation interface powered by Sass loops that visualizes semantic entity types using pseudo-elements and data attributes.
Kinetic CSS Loader
A smooth, rhythmic, and mesmerizing loader that looks complex but is implemented simply and efficiently.
Skull Toggle (CSS)
A playful skeleton toggle switch animated purely with CSS. The skull handle slides via @keyframes triggered by the :checked state, while a complex hand assembly - constructed from gradients and box-shadows - slides in to “push” the toggle, creating a whimsical, interactive narrative without JavaScript.
List Styles
An aesthetically pleasing, modern todo list featuring a vibrant gradient theme and an intuitive hierarchy creation function without complex control buttons.
Creative Section Design
A visually rich, animated section with cards that respond to hover (a colored border appears), creating a sense of interactivity and depth.
CSS Rage Button
A playful button that shakes, reddens, and “curses” with increasing intensity upon each click (or hover for the secondary button), visualizing a gradual loss of composure.
Product Plan Cards with CSS Ribbons
A pure CSS pricing component that creates a dimensional ‘ribbon’ aesthetic solely through ::after pseudo-elements and clip-path geometry. The layout leverages CSS Custom Properties for distinct color themes and calc with negative margins to extend elements beyond the parent container, creating a folded paper effect without any JavaScript dependencies.
Pure CSS Liquid Wave Illusion
This demo creates a captivating liquid wave illusion using a single ::before pseudo-element inside multiple overflow: hidden containers. The fluid motion is the result of two simultaneous @keyframes animations - one controlling top and the other transform: rotateZ.
Metallic Skeuomorphic Toggle Switches
A skeuomorphic toggle design achieved by combining multiple linear-gradients for the body and box-shadow to create a volumetric effect. The smooth switching animation and “glow” in the active state are implemented via transition with a custom cubic-bezier curve.
Checkbox Hamburger Menu Animation
A demonstration of step-by-step CSS transformation to create a cross effect: on :checked, the middle bar either gets opacity: 0 or scales down, while the top and bottom bars simultaneously rotate and translate.
CSS Cat Illustration with Tracking Eyes
An illustration of a cat created entirely in CSS, featuring interactive eyes that follow the cursor. JavaScript uses Math.atan2 to calculate the gaze angle, while all of the cat’s details - from the body to the whiskers - are implemented using pseudo-elements, box-shadow, and gradients.
Dark Mode Toggle Switch
A toggle switch implemented using a single <input type="checkbox"> and pseudo-elements. The “button” effect and its movement are achieved through complex, multi-layered box-shadow and the shifting of the ::before element.
Neon Icon Hover Effect
A navigation menu with a neon glow and a complex hover effect. Icons and text use the CSS drop-shadow filter to create a glow effect, while the element’s color is controlled via an inline CSS variable --clr.
Page Indicator Animation
A full vertical slider with scroll-snap points. The navigation indicator is dynamically animated using the Intersection Observer API, which tracks when a slide enters the viewport.
Change Bass Color with Hue
A simple example of media control - a click event in vanilla JS is used both to control the HTML5 Audio API and to dynamically change the hue-rotate CSS filter.
Progress Button Microinteractions
An animated loader button using jQuery and SCSS, where progress is implemented via an @for loop that generates 101 linear-gradient rules - the state is changed through a custom attribute updated by JS.
Ticket
A ticket layout where data (date, code) is generated on the fly with vanilla JS and inserted into the HTML - styling is done using CSS Grid, drop-shadow, and reusable SVG symbols via the <use> tag.
BMO CSS Illustration with nth-child
An example of creating CSS art using pseudo-elements and nth-of-type, enhanced with a JS easter egg - a mouseover spam detector to call the Vibration API.
CSS Hamburger Click Effect
Explore the technique of creating a three-line hamburger using a single <span> tag and two pseudo-elements, - which are then animated into an ‘X’ via a combination of CSS properties rotate(45deg) and translate.
FAQ Accordion with Font Awesome Icons
The “Accordion/FAQ” functionality is implemented using pure JavaScript, which handles the click on the parent element and toggles the active class on the FAQ container. The visual highlight is the icon change via CSS display: none/block properties.
Gender Toggle Button with Bounce Effect
This interactive toggle switch demonstrates advanced animation work, where delayed class toggling in jQuery coordinates the knob movement and a stylish “color fill” text effect, created in CSS using overflow: hidden; and pseudo-elements.
Neumorphic Multi-Buttons with CSS Feedback
An effective button group where the hover effect is created via inset box-shadow - and the click confirmation animation is implemented using transform and opacity on the ::after pseudo-element.
Simple YouTube API Search App
A simple search client for the YouTube API written in vanilla JS - data is fetched using fetch, and the results list is generated on the fly and injected into the DOM via innerHTML.
Vue Add to Cart Animation
This Vue.js component showcases a clean implementation of the “Add to Cart” micro-interaction using reactive data and CSS animation. The main technical feature is the dynamic counter display via a CSS ::before pseudo-element and the count attribute, alongside the “Pop” effect upon update.
Animated UI Radio Button with CSS Keyframes
This custom radio button UI employs pure CSS @keyframes and transform properties to create a dynamic, liquid-like squash-and-stretch animation upon selection - the smooth UI transition is managed by complex jQuery state logic that precisely adds and removes animation classes.
Art Deco Card
An elegant Art Deco style card created purely with CSS/SCSS, utilizing a sophisticated technique with pseudo-elements to construct complex, multi-layered geometric borders and corners.
Lighthouse Single-Div CSS Illustration
The entire scene is constructed from a combination of gradients (linear-gradient/radial-gradient) and precise element positioning using background-position.
