Pseudo Elements
Modern CSS pseudo-elements provide direct styling hooks into browser-native features—dialogs, popovers, view transitions—reducing the need for JavaScript. Sometimes you don't need to install a library; the browser has you covered.
When to Apply
Reference these guidelines when:
Adding decorative elements without DOM nodes Implementing view transitions (image lightboxes, page transitions) Building hover/focus states Styling native browser UI components Reducing JavaScript for visual effects Core Pseudo-Elements Pseudo-Element Purpose ::before / ::after Decorative layers, icons, hit targets ::view-transition-group(name) Control view transition animations ::view-transition-old(name) Style the outgoing snapshot ::view-transition-new(name) Style the incoming snapshot ::backdrop Style dialog/popover backdrops ::placeholder Style input placeholders ::selection Style selected text ::before & ::after
Create anonymous inline elements as first/last child. Require content to render.
Hover Effect Pattern .button { position: relative; }
.button::before { content: ""; position: absolute; inset: 0; transform: scale(0.95); opacity: 0; transition: transform 0.2s, opacity 0.2s; }
.button:hover::before { transform: scale(1); opacity: 1; }
Use cases:
Decorative layers and backgrounds Expanding hit targets without DOM nodes Keeping HTML clean while enabling visual complexity View Transitions API
Animate between DOM states with document.startViewTransition(). The browser captures snapshots and generates pseudo-elements for both states.
How It Works Assign view-transition-name to source element Call document.startViewTransition() Inside callback, move the name to target element Browser morphs between positions, sizes, styles sourceImg.style.viewTransitionName = "card";
document.startViewTransition(() => { sourceImg.style.viewTransitionName = ""; targetImg.style.viewTransitionName = "card"; });
Styling Transitions ::view-transition-group(card) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
When two elements share the same view-transition-name across a transition, the browser treats them as the same element and interpolates between their positions, sizes, and styles.
Key Guidelines Prefer pseudo-elements over extra DOM nodes for decorative content Use view transitions instead of JavaScript libraries for page/state transitions Check browser support: View Transitions API is modern, use progressive enhancement Keep HTML clean: Pseudo-elements reduce markup clutter References MDN Pseudo-elements Reference View Transitions API