7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS

Understanding ::before and ::after Fundamentals

CSS pseudo-elements are powerful tools that allow developers to style specific parts of an element or insert decorative content without modifying the HTML structure. The ::before and ::after pseudo-elements, in particular, have become essential techniques in modern web development for creating sophisticated visual effects while maintaining clean, semantic markup.

These pseudo-elements behave like virtual children of the selected element, appearing inside the element's box model as if they were actual DOM nodes, yet they exist only in the rendered page. MDN's pseudo-elements documentation provides the authoritative specifications for how these virtual elements work within the CSS rendering model.

How Pseudo-Elements Work

• ::before creates a virtual first child of the selected element
• ::after creates a virtual last child of the selected element
• Both are inline by default and require the content property
• They are "tree-abiding" pseudo-elements that conform to the box model

By mastering these pseudo-elements, you can add sophisticated visual enhancements to your web development projects without cluttering your HTML with additional elements. These techniques work seamlessly with other CSS layout methods like CSS Grid, enabling you to create complex, visually stunning layouts with minimal markup.

The content Property: Your Design Tool

The content property is mandatory for ::before and ::after pseudo-elements - without it, nothing will appear on the page. CSS-Tricks' ::before/::after Almanac provides comprehensive documentation on the available values and their applications.

Available Content Values

Key insight: For resizable backgrounds, use empty content with background-image instead of the url() syntax, which creates fixed-size image insertions.

The flexibility of the content property is what makes ::before and ::after so powerful for modern web design, enabling everything from simple icon replacements to complex animated interfaces. Combined with SVG background techniques, these pseudo-elements provide endless possibilities for visual enhancement without adding bloat to your pages.

7 Practical Applications

Let's explore seven practical applications that demonstrate how mastering these pseudo-elements can elevate your CSS skills and streamline your styling workflow. These techniques are foundational to modern web development best practices, enabling you to create polished interfaces efficiently.

CSS-Tricks' comprehensive guide covers these patterns with interactive CodePen examples that you can use as reference implementations.

Understanding pseudo-elements is also valuable for SEO optimization, as clean, semantic HTML with efficient CSS contributes to better page performance and search engine rankings.

Use #1: Adding Icons Without Extra Markup

One of the most common applications of ::before is replacing or enhancing default list bullets with custom icons, emojis, or symbols. CSS-Tricks documents this pattern as an efficient technique for visual enhancement.

Benefits

• No wrapper elements or additional classes required
• Complete control over visual presentation
• Lightweight - no external icon libraries needed
• Easy to customize with CSS variables

.custom-list li::before {
 content: "\2713"; /* Unicode checkmark */
 color: #10b981;
 margin-right: 0.5rem;
 font-weight: bold;
}

Accessibility Tip: For decorative icons, use aria-hidden="true" on the parent or ensure equivalent information is conveyed through text content. Screen readers cannot access content inserted via pseudo-elements, so always provide alternative text for meaningful visual indicators.

This icon technique complements our frontend development approach, where we prioritize performance and accessibility while creating visually appealing interfaces.

Use #2: Custom Blockquote Styling

Blockquotes benefit greatly from ::before and ::after styling, allowing designers to add quotation marks, decorative backgrounds, or other visual elements that enhance the quoted content's visual hierarchy. CSS-Tricks demonstrates this pattern as an elegant way to style testimonial components and pull quotes.

Creating Decorative Quotation Marks

blockquote::before {
 content: "\201C"; /* Left double quotation mark */
 font-size: 4rem;
 line-height: 1;
 color: #3b82f6;
 display: block;
 margin-bottom: -1rem;
}

blockquote::after {
 content: "\201D"; /* Right double quotation mark */
 font-size: 4rem;
 line-height: 1;
 color: #3b82f6;
 display: block;
 margin-top: -1rem;
 text-align: right;
}

By combining ::before and ::after with positioning and sizing properties, you can create sophisticated quote box designs while keeping the HTML semantic and simple. This approach is particularly valuable for testimonial sections in client websites, where visual polish directly impacts credibility and conversions.

Use #3: Animated Toggle Switches

Custom toggle switches transform plain HTML checkboxes into visually appealing, interactive controls. CSS-Tricks provides detailed examples of this technique using pure CSS.

The Technique

1. Hide the default checkbox appearance
2. Use a label element as the visible switch track
3. Use ::before or ::after for the toggle thumb
4. Animate based on :checked state

.toggle-switch input {
 appearance: none;
 position: absolute;
}

.toggle-switch {
 position: relative;
 width: 60px;
 height: 32px;
 background: #e5e7eb;
 border-radius: 9999px;
 cursor: pointer;
}

.toggle-switch::after {
 content: "";
 position: absolute;
 top: 4px;
 left: 4px;
 width: 24px;
 height: 24px;
 background: white;
 border-radius: 50%;
 transition: transform 0.3s ease;
 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked::after {
 transform: translateX(28px);
}

The :checked pseudo-class combined with ::before and ::after enables smooth transitions without JavaScript for the visual effects. This pattern creates polished, accessible form controls that work seamlessly across all modern browsers, demonstrating the power of CSS-first development.

Use #4: Gradient Borders and Effects

Gradient borders are achievable by layering pseudo-elements behind the main element, with the pseudo-element having a larger size and gradient background. CSS-Tricks documents this technique as an effective method for creating modern visual effects.

Gradient Border Technique

.gradient-border {
 position: relative;
 padding: 3px; /* Controls border thickness */
 background: linear-gradient(to right, #3b82f6, #8b5cf6);
 border-radius: 8px;
}

.gradient-border::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 padding: 3px;
 background: linear-gradient(to right, #3b82f6, #8b5cf6);
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 mask-composite: exclude;
 pointer-events: none;
}

.gradient-border > * {
 background: white;
 border-radius: 6px;
}

Image Overlays

Similarly, gradient overlays on images ensure text readability and create visual depth:

.hero-image::before {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
 to bottom, 
 transparent 0%, 
 rgba(0,0,0,0.7) 100%
 );
}

This technique is essential for hero sections and feature displays, ensuring text remains readable while maintaining visual appeal. When combined with CSS variables, these effects become easily themeable and maintainable across large projects.

Use #5: Custom Radio Buttons and Form Controls

Custom radio buttons leverage ::before and ::after to replace default browser-styled inputs with custom designs while maintaining functionality. CSS-Tricks explores this pattern as an elegant solution for form styling challenges.

Radio Button Styling

.custom-radio input {
 appearance: none;
 width: 24px;
 height: 24px;
 border: 2px solid #d1d5db;
 border-radius: 50%;
 cursor: pointer;
}

.custom-radio input::before {
 content: "";
 display: block;
 width: 12px;
 height: 12px;
 background: #3b82f6;
 border-radius: 50%;
 transform: scale(0);
 transition: transform 0.2s ease;
}

.custom-radio input:checked::before {
 transform: scale(1);
}

.custom-radio input:checked {
 border-color: #3b82f6;
}

File Input Buttons

File input styling is another common application, as the default file input is notoriously difficult to style directly:

.file-upload::before {
 content: "Choose File";
 display: inline-block;
 padding: 0.75rem 1.5rem;
 background: #3b82f6;
 color: white;
 border-radius: 0.375rem;
}

Creating consistent, accessible form experiences is a core aspect of professional web development services, and pseudo-elements are invaluable tools for achieving polished form designs that enhance user experience and brand perception.

Use #6: Shape Creation and Decorative Elements

The combination of empty content and border styling enables creation of geometric shapes without images or SVG. CSS-Tricks' ::before/::after Almanac covers the border techniques that make this possible.

CSS Triangle

.triangle::before {
 content: "";
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid #3b82f6;
}

Speech Bubble

.speech-bubble::before {
 content: "";
 position: absolute;
 top: -10px;
 left: 20px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid white;
}

Angled Dividers

Angled section breaks use transforms for visual interest:

.section-divider::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 50px;
 background: inherit;
 transform: skewY(-2deg);
 transform-origin: 100% 0;
}

These shape creation techniques enable unique visual elements that enhance landing page designs without requiring additional image assets. By understanding how CSS fallbacks work, you can ensure these visual enhancements degrade gracefully in older browsers.

Use #7: Tooltips and Floating Labels

Pure CSS tooltips leverage the content property to display text and ::after for decorative elements. CSS-Tricks' practical guide shows how to implement these patterns effectively.

Pure CSS Tooltip

[data-tooltip]::before {
 content: attr(data-tooltip);
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 padding: 0.5rem 0.75rem;
 background: #1f2937;
 color: white;
 font-size: 0.875rem;
 border-radius: 0.375rem;
 white-space: nowrap;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s, visibility 0.2s;
}

[data-tooltip]:hover::before {
 opacity: 1;
 visibility: visible;
}

/* Arrow */
[data-tooltip]::after {
 content: "";
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 border: 6px solid transparent;
 border-top-color: #1f2937;
 opacity: 0;
 visibility: hidden;
}

[data-tooltip]:hover::after {
 opacity: 1;
 visibility: visible;
}

Floating Label Pattern

The floating label pattern moves placeholder text to become a label when input is focused, creating polished form experiences. Combined with our frontend development expertise, these techniques create intuitive user interfaces that enhance engagement and usability and improve conversion rates.

Performance and Best Practices

Performance Impact

Pseudo-elements have minimal performance impact when used appropriately. MDN's documentation confirms that these pseudo-elements are part of the existing DOM structure:

• No network requests: Pseudo-elements are purely CSS-based
• Part of existing DOM: No additional DOM nodes created
• Paint vs layout: Use transforms and opacity over layout-triggering properties for smooth animations

Accessibility Considerations

Content inserted via ::before and ::after is not accessible to screen readers MDN Web Docs confirms.

Best Practices:

• Reserve pseudo-elements for decorative elements only
• All meaningful content must remain in HTML
• Use aria-label or visually hidden text for interactive indications
• Test with keyboard navigation and screen readers

When to Avoid

Avoid using pseudo-elements for:

• Essential content that users need to read or interact with
• Interactive elements requiring keyboard focus
• Content critical for understanding the page

Following these guidelines ensures your websites remain accessible to all users while benefiting from the visual enhancements pseudo-elements provide. Performance and accessibility are core principles in our SEO services, where fast, accessible websites consistently outperform competitors in search rankings.

Conclusion

The ::before and ::after pseudo-elements represent fundamental CSS techniques that enable sophisticated visual designs while maintaining clean, semantic HTML. From simple icon additions to complex animated components, these pseudo-elements provide powerful tools for creating polished, professional web interfaces.

Key Takeaways:

1. Always include the content property - it's mandatory for any visible effect
2. Use double-colon syntax (::) for modern development clarity
3. Reserve for decorative elements only - not for accessible content
4. Combine with :hover, :checked, and other pseudo-classes for interactivity
5. Use transforms and opacity for smooth, performant animations

By mastering these seven practical applications and following accessibility best practices, you can leverage pseudo-elements to build better websites more efficiently. These techniques are foundational to our web development approach, enabling us to create visually stunning, performant, and accessible websites that drive results for our clients.

Continue Your CSS Learning Journey: Explore related topics like CSS Grid layouts, SVG background techniques, and CSS variables for maintainable code.

Ready to implement these techniques in your next project? Contact our team to discuss how we can help bring your web development vision to life with cutting-edge CSS techniques.

Sources

1. CSS-Tricks: 7 Practical Uses for the ::before and ::after Pseudo-Elements - Comprehensive guide with interactive CodePen examples
2. CSS-Tricks: ::before / ::after Almanac - Official documentation on syntax and content property values
3. MDN Web Docs: Pseudo-elements Reference - Official Mozilla documentation and specifications