Back to the ::before / ::after guide

Effects using ::before / ::after

The catalog contains 3,115 effects using ::before / ::after. The 96 most-viewed examples are shown below. Read the ::before / ::after guide for a complete explanation.

Deep Abyssbg-abyss-deep

Alarm Cardcard-alarm

Orbit Spiralhover-orbit-spiral

Aurora Curtainbg-aurora-curtain

Savanna Divided Tabstab-savanna-divider

Blade Slash Buttonbtn-blade

7 Segment Displayloader-7-segment

3D Fold Origamitip-3d-fold-origami

Hot / Coldtoggle-hot-cold

Aperture Iris Closehover-aperture-iris

3D Cube Spintip-3d-cube-spin

Snow Wintertip-snow-winter

Arrow / Dotstoggle-arrow-dots

Terminal Prompttoggle-terminal-prompt

Tether / Untether Devicetoggle-tether-device

Chrome Bubblebg-chrome-bubble-reflect

Thin Film Interferencebg-thin-film-interference

Spotlight Sweep Buttonbtn-spotlight-sweep

3D Y-Axis Flipcheck-rotate-3d-y

Zoom Blurhover-zoom-blur

Elevatorloader-elevator

Underline Active Breadcrumbsnav-crumb-underline-active

Vertical Tab Gradient Bg Flownav-vtab-gradient-bg-flow

Chevron Arrowtip-arrow-chevron

Awake / Tiredtoggle-awake-tired

Bit Fliptoggle-bit-flip

Obsidian Volcanictoggle-obsidian-volcanic

Ripple Copy Alertalert-ripple-copy

Tether Bulk Alertalert-tether-bulk

Turbine Camera Alertalert-turbine-camera

Ripple Badgebadge-anim-ripple

Award Ribbonbadge-award-ribbon

Deco Corner Fold Badgebadge-deco-corner-fold

Confetti Burst FX Badgebadge-fx-confetti-burst

Bronze Award Ribbonbadge-ribbon-award-bronze

Space Planet Badgebadge-space-planet

Tag With Holebadge-tag-with-hole

Abalone Nacrebg-abalone-shell-nacre

Amplifier Pulsebg-amplifier-pulse

Art Deco Fanbg-art-deco-fan

Asteroid Beltbg-asteroid-belt

Beacon Sweepbg-beacon-sweep

Beetle Wing Iridescencebg-beetle-wing-iridescent

Candle Flame Rowbg-candle-flame-row

Checkered Flagbg-checkered-flag-wave

Cherry Grovebg-cherry-grove

Wind Chime Spinbg-chime-wind-spin

Comet NEOWISEbg-comet-neowise

Cracked Concretebg-concrete-cracked

Cotton Candy Spinbg-cotton-candy-spin

Diagonal Moving Linesbg-diagonal-lines

Dichroic Glassbg-dichroic-glass

Crimson Duskbg-dusk-crimson

Electric Keyboardbg-electric-keyboard

Foggy Forestbg-foggy-forest

Spiral Galaxybg-galaxy

Gradient Shiftbg-gradient-shift

Koch Snowflakebg-koch-snowflake-edge

Tuning Fork Ringbg-tuning-fork-ring

Wormhole Spinbg-wormhole-spin-vortex

Binary Stream Buttonbtn-binary

Bracket Wrap Buttonbtn-bracket

Frosted Ice Buttonbtn-ice-crystal

Ocean Tidebtn-ocean-tide

Smoke Driftbtn-smoke

Codex Lore Cardcard-codex

Discount Couponcard-coupon

Credit Cardcard-credit

Invite Only Cardcard-invite

YouTube Video Cardcard-youtube

Amber Fossil Stonecheck-amber-stone

Checkmark Radioform-radio-checkmark

Flip Radioform-radio-flip

Border Gradient Flowhover-border-gradient-flow

Needle Right Edgehover-edge-needle-right

Glitter Shimmerhover-glitter-shimmer

Typewriter Revealhover-typewriter-reveal

Warm Overlayhover-warm-overlay

Wipe Downhover-wipe-down

Arcade Cabinetloader-arcade-cabinet

Barbell Pressloader-barbell-press

Baseball Pitchloader-baseball-pitch

Game Boyloader-game-boy

Pilgrim Hatloader-pilgrim-hat-buckle

Stopwatch Tickloader-stopwatch

Sun Raysloader-sun-rays

Vinyl Scratchloader-vinyl-scratch

Curve Arrow Breadcrumbsnav-crumb-curve-arrow

Icon Text Breadcrumbsnav-crumb-icon-text

Line Separator Breadcrumbsnav-crumb-line-separator

Pipe Separator Breadcrumbsnav-crumb-pipe-separator

Tooltip Icon Navnav-iconnav-tooltip

Text Reveal Mask Navbarnav-text-reveal-mask

Text Slide Down Mask Navbarnav-text-slide-down-mask

Oasis Stairs Progressprog-oasis-stairs

Cove Circular Framerange-cove-circle

Continue exploring

::before / ::after guide All guides CSS reference