CSS Before and After Custom Animations Transitions: A Complete Guide

Transform static websites into engaging experiences with CSS pseudo-elements and transitions

CSS pseudo-elements are incredibly versatile for modern web design. When combined with CSS transitions, these pseudo-elements become even more compelling, enabling smooth, performant animations that enhance user experience without sacrificing page performance. Understanding these techniques is essential for anyone building modern, interactive interfaces as part of their web development services.

This guide covers everything you need to know about animating CSS pseudo-elements, from basic syntax and hover effects to advanced techniques using CSS custom properties. Whether you're building buttons, cards, or interactive UI components, mastering pseudo-element animations will elevate your web development skills.

Understanding CSS Pseudo-Elements ::before and ::after

CSS pseudo-elements are special selectors that allow you to style specific parts of an element or insert virtual content. The ::before pseudo-element inserts content before the actual content of the element, while ::after inserts content after the element's content. Both are generated elements that exist in the document tree but are not part of the actual DOM markup.

These pseudo-elements have been part of CSS since the beginning, but the modern double-colon syntax (::before, ::after) replaced the original single-colon syntax (:before, :after) in CSS3 to distinguish pseudo-elements from pseudo-classes.

Basic Syntax and Usage

The content property is required for pseudo-elements to render--without it, ::before and ::after will not appear on the page. The content can be an empty string for purely decorative elements, a string of text, or even a URL to an image.

By default, pseudo-elements are inline elements. Use display: block or display: inline-block when you need to control dimensions, margins, or positioning.

basic-pseudo-elements.css

1.element::before {2 content: ""; /* Required - can be empty string */3 display: block; /* Block-level by default */4 width: 100%;5 height: 4px;6 background: linear-gradient(90deg, #6366f1, #8b5cf6);7}8 9.element::after {10 content: "→"; /* Can contain text or be empty */11 position: absolute;12 right: 1rem;13 transition: transform 300ms ease-out;14}

Common Use Cases for Pseudo-Elements

Pseudo-elements are incredibly versatile for web design:

Decorative borders and backgrounds: Create visual accents without adding extra HTML markup
Icon additions: Add icons to buttons, links, or navigation items
Quotation marks: Style blockquote decorations automatically
Tooltip indicators: Create visual cues for interactive elements
Hover effects: Build engaging interactions that animate on user interaction

For more advanced styling techniques, explore our guide on creating type-safe styles with Panda CSS to complement your animation skills.

CSS Transitions Fundamentals

CSS transitions provide a way to animate changes between property values smoothly over a specified duration. Unlike keyframe animations that run automatically, transitions are triggered by state changes--typically hover, focus, or active states. This makes transitions ideal for interactive effects like button hovers, link underlines, and card reveals.

The transition system consists of four individual properties that control different aspects of the animation, plus a convenient shorthand that combines them all.

Transition Properties Deep Dive

transition-properties.css

1.element {2 /* Individual properties */3 transition-property: opacity, transform;4 transition-duration: 300ms;5 transition-timing-function: ease-out;6 transition-delay: 0s;7 8 /* Shorthand - most common usage */9 transition: opacity 300ms ease-out, transform 300ms ease-out;10 11 /* All properties shorthand */12 transition: all 300ms ease-out;13}

Timing Functions Explained

Timing functions control the acceleration curve of your animations, determining how the animation progresses through time. The right timing function makes animations feel natural and polished.

Timing Function	Description	Use Case
`ease`	Default, starts slow, accelerates, then slows down	General purpose animations
`ease-in`	Starts slow, accelerates to full speed	Exit animations, elements leaving
`ease-out`	Starts fast, decelerates to stop	Entry animations, hover effects
`ease-in-out`	Starts slow, accelerates, then slows dramatically	Emphasis animations
`linear`	Constant speed throughout	Loading indicators, continuous motion
`cubic-bezier()`	Custom curve with full control	Polished, custom feel

Custom cubic-bezier curves give you precise control over the animation timing. For a snappy, natural feel, values like cubic-bezier(0.4, 0, 0.2, 1) work well.

custom-timing.css

1.element {2 /* Custom timing for a snappy, natural feel */3 transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);4 5 /* Bouncy effect */6 transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);7 8 /* Smooth, elegant deceleration */9 transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);10}

Animating Pseudo-Elements

Animating pseudo-elements follows the same principles as animating regular elements, with one key difference: the animation is typically triggered by a state change on the parent element rather than the pseudo-element itself. The most common pattern is using the parent element's :hover state to trigger animations on ::before or ::after.

The Hover Trigger Pattern

The hover trigger pattern is the foundation of most pseudo-element animations. By applying transitions to the pseudo-element and changing its properties on parent hover, you create smooth, performant animations.

hover-animation.css

1.button {2 position: relative;3 overflow: hidden;4}5 6.button::before {7 content: "";8 position: absolute;9 inset: 0;10 background: linear-gradient(45deg, #6366f1, #8b5cf6);11 opacity: 0;12 transition: opacity 300ms ease-out;13 z-index: -1;14}15 16.button:hover::before {17 opacity: 1;18}

Creating Interactive Visual Effects

With pseudo-element animations, you can create sophisticated interactive effects:

Sliding underlines: Animate width and position for navigation links
Expanding backgrounds: Grow an overlay from a corner or center on hover
Icon transformations: Rotate, scale, or translate icons smoothly
Notification badges: Pulse or slide badges into view
Loading spinners: Use rotating pseudo-elements for loading states

Performance Optimization

Performance is critical when working with animations. Not all CSS properties animate efficiently--some trigger expensive layout recalculations or repaints that can cause janky animations and impact battery life on mobile devices. Understanding which properties to animate--and which to avoid--is essential for smooth, performant animations.

Properties That Animate Smoothly

Recommended for animation:

transform - translate, scale, rotate, skew (GPU-accelerated)
opacity - fade effects (GPU-accelerated)
filter - blur, brightness (use with caution)

Avoid animating:

width, height - Triggers layout recalculation
margin, padding - Affects layout
top, left - Triggers layout
box-shadow - Expensive to render

Respecting User Motion Preferences

Accessibility is essential. Many users experience discomfort or motion sensitivity, and the prefers-reduced-motion media query allows you to honor their preferences by reducing or eliminating animations.

motion-preferences.css

1@media (prefers-reduced-motion: reduce) {2 .animated-element,3 .animated-element::before,4 .animated-element::after {5 transition: none !important;6 animation: none !important;7 }8}9 10/* Alternative: Use shorter durations */11@media (prefers-reduced-motion: no-preference) {12 .element {13 transition: all 300ms ease-out;14 }15}

Advanced Techniques

Using CSS Custom Properties with Pseudo-Elements

CSS custom properties (variables) make pseudo-element animations more flexible and maintainable. By using variables for values that change during animation, you can create reusable components with consistent behavior.

This approach, as demonstrated by Motion.page, allows you to define animation states declaratively on the parent element, keeping your CSS organized and scalable.

css-variables-animation.css

1.card {2 --card-accent-color: #6366f1;3 --card-accent-opacity: 0;4 --card-scale: 1;5 position: relative;6}7 8.card::before {9 content: "";10 position: absolute;11 inset: 0;12 background: var(--card-accent-color);13 opacity: var(--card-accent-opacity);14 transform: scale(var(--card-scale));15 transition: all 300ms ease-out;16}17 18.card:hover {19 --card-accent-opacity: 0.1;20 --card-scale: 1.02;21}

Best Practices and Common Patterns

Always specify the content property explicitly--even for empty pseudo-elements
Use display property to control pseudo-element layout behavior
Set appropriate z-index for proper stacking context
Test animations at different durations--too fast feels jarring, too slow feels sluggish
Use appropriate timing functions for the effect type (ease-out for entries, ease-in for exits)
Consider keyboard users--pseudo-elements don't appear in focus order
Use DevTools animation inspectors to debug and fine-tune animations

Conclusion

CSS pseudo-element animations are a powerful tool for creating polished, engaging web experiences. By understanding the fundamentals of pseudo-elements and transitions, knowing which properties animate efficiently, and respecting user preferences for reduced motion, you can create animations that enhance rather than hinder the user experience.

Start with simple hover effects and gradually build up to more complex animations as you become comfortable with the techniques. Remember that the best animations are those that feel natural, respect user preferences, and perform smoothly across all devices.

Looking to implement advanced CSS animations on your website? Our web development services include frontend optimization and animation implementation. Need help with a specific project? Contact us to discuss how we can help bring your design vision to life.

Frequently Asked Questions

Sources

MDN Web Docs: Using CSS Transitions - Comprehensive official documentation on CSS transitions, covering property animation, timing functions, and practical examples
MDN Web Docs: ::before Selector - Official reference for CSS pseudo-elements with syntax and accessibility considerations
Josh W. Comeau: An Interactive Guide to CSS Transitions - In-depth interactive tutorial covering fundamentals, timing functions, and UX best practices
Motion.page: Start Animating Your Pseudo Elements - Tutorial demonstrating techniques for animating CSS pseudo-elements using CSS custom properties