The Core Problem
When you apply a CSS rule that hides text--such as text-indent: -9999px or font-size: 0--you might inadvertently hide the pseudo-element content as well. This happens because pseudo-elements like ::before and ::after inherit certain properties from their parent element.
The CSS content property is essential for making pseudo-elements visible. If the content property is not specified, has an invalid value, or has normal or none as its value, the ::before pseudo-element is not rendered at all. Understanding this relationship between parent styling and pseudo-element visibility is key to solving the hiding challenge.
When working with modern web frameworks like Next.js, understanding CSS pseudo-elements helps you create polished, accessible interfaces that follow best practices for both visual design and screen reader compatibility. Mastery of these CSS techniques is fundamental to professional front-end development.
1.element {2 font-size: 0;3 color: transparent;4}5 6.element::before {7 font-size: 16px;8 color: #333333;9 content: "★";10}The Font-Size Technique
The most reliable method for hiding text while preserving ::before content involves manipulating font-size and color properties strategically. This approach works because pseudo-elements can override inherited properties with their own declarations.
When you set font-size: 0 on the parent, all text content shrinks to nothing. The pseudo-element then explicitly resets the font size to a visible value, making only the generated content appear. The color property follows the same pattern--making parent text transparent while the pseudo-element displays in a visible color.
Setting the Correct Font Size
For icon-based pseudo-elements using font icons, a size between 14px and 24px typically works well. Text-based pseudo-elements should match the surrounding text size to maintain visual harmony. Using relative units like rem ensures the pseudo-element scales appropriately when users adjust their browser's default font size.
This technique is particularly valuable when building custom React components that require clean, icon-only interfaces while maintaining accessibility standards. Combined with responsive design principles, you can create adaptable interfaces that work across all device sizes.
Each approach has distinct advantages and trade-offs
Text-Indentation Approach
Moves text off-screen using text-indent: -9999px while leaving pseudo-elements visible. Works because text-indent specifically affects inline content, not the pseudo-element box.
Position Absolute Method
Absolutely positions the pseudo-element while hiding parent's text content. Provides precise control over placement, ideal for icon buttons with exact dimensions.
Clipping and Masking
Modern CSS clipping properties can hide text while revealing pseudo-elements. More advanced but provides powerful options for complex designs.
Accessibility Considerations
Accessibility is a critical concern when hiding text content. Screen readers interact with HTML content differently than visual rendering.
Screen Reader Behavior
Screen readers generally do not announce content added via CSS pseudo-elements reliably. According to MDN's documentation on the ::before pseudo-element, using a ::before pseudo-element to add content is discouraged because it is not consistently accessible to screen readers.
If your pseudo-element content is meaningful and should be announced to screen reader users, consider using actual HTML elements instead of pseudo-elements. For decorative content that should be hidden from all users including screen readers, the pseudo-element approach is acceptable.
ARIA Attributes and Pseudo-Elements
You can use ARIA attributes to provide alternative text for pseudo-element content, though browser and screen reader support varies:
.element[aria-label="Settings"]::before {
content: "⚙";
}
For applications requiring strict accessibility compliance, our web accessibility services can help ensure your pseudo-element implementations meet WCAG guidelines. We specialize in creating inclusive web experiences that work for all users.
Common Use Cases
Icon Buttons
Icon buttons represent one of the most common use cases for hiding text while showing pseudo-element icons:
.button {
font-size: 0;
padding: 12px 24px;
}
.button::before {
content: "✉";
font-size: 20px;
}
Enhanced Links
You can add visual indicators to links without modifying the visible link text:
.external-link {
font-size: 0;
}
.external-link::before {
content: "External Link";
font-size: 14px;
color: #0066cc;
}
Best Practices
-
Start with semantic HTML - Pseudo-elements should enhance presentation without being the sole carrier of meaningful information.
-
Use clear naming conventions - Classes like
icon-buttonordecorative-linkcommunicate intent better than generic names. -
Add documentation and comments - Explain why specific techniques are used and note any accessibility considerations.
-
Test across devices - Test implementations across multiple browsers, devices, and zoom levels.
-
Consider performance - The font-size technique is highly performant as it relies on inherited properties that browsers optimize well. For complex layouts with many elements, this approach is more efficient than position-based alternatives.
When implementing these techniques in production applications, our front-end development team follows established patterns that balance visual design with performance and accessibility requirements. Our developers are skilled in modern CSS architecture and apply these best practices across all client projects.
Frequently Asked Questions
Sources
- MDN Web Docs - ::before - Official documentation on CSS pseudo-elements, content property requirements, and accessibility considerations
- Stack Overflow - How to hide text on a tag without removing text inside :before pseudo element - Community discussion and practical implementation techniques
- CSS-Tricks - Hide text but not the :before pseudo class - Forum discussion on font icon techniques and pseudo-element behavior