Valid CSS Content: A Complete Guide

What Is the CSS Content Property

The CSS content property is unique in that it specifically works with pseudo-elements to generate content that is visible on the page but does not exist in the document's HTML source. When combined with ::before and ::after, it enables developers to insert virtual content directly into the DOM without modifying the underlying HTML structure.

This capability opens doors for decorative enhancements, visual effects, and interface improvements that keep markup clean and maintainable. Whether you're adding decorative icons to buttons, creating custom form elements, or implementing elegant typography effects, mastering the content property gives you a powerful tool for enhancing user interfaces without cluttering your HTML markup. For teams looking to implement these techniques professionally, our web development services provide expert guidance on modern CSS practices that deliver exceptional user experiences.

According to MDN Web Docs, pseudo-elements like ::before create virtual elements that become the first or last child of the selected element, allowing developers to style and position generated content.

Valid Content Values

String Values

The most straightforward use of the content property involves inserting text strings. Strings must be enclosed in quotes, either single or double, and can contain any text characters including Unicode symbols and emojis.

.element::before {
 content: "→ ";
}

.icon::after {
 content: " ✨";
}

String content works exceptionally well for adding prefixes and suffixes to elements, decorative symbols, or status indicators. Common use cases include custom bullet points in lists, download indicators on buttons, and decorative arrows that guide user attention. The simplicity of string values makes them ideal for quick visual enhancements that improve interface clarity without adding complexity to your markup.

Image Values

The content property accepts image URLs, allowing developers to insert images without additional HTML elements. While this technique has limitations compared to using the <img> tag or CSS background images, it serves specific use cases effectively.

.element::before {
 content: url("icon.svg");
}

As demonstrated in CSS-Tricks tutorials, pseudo-elements with images are particularly useful for creating gradient overlays and decorative effects that layer behind or atop content. This approach works well for adding subtle visual texture to cards, creating gradient borders without additional markup, or inserting decorative icons adjacent to text content.

Counter Values

CSS counters provide a powerful mechanism for numbering elements automatically. The content property works with counter() and counters() functions to display counter values dynamically based on document structure.

ol {
 counter-reset: ordered-list;
}

li::before {
 counter-increment: ordered-list;
 content: counter(ordered-list) ". ";
}

Counter-based content is particularly useful for styled ordered lists, numbered headings, or any scenario requiring dynamic numbering that responds to document structure. The counters() function even supports nested counters for hierarchical numbering in nested lists, making it a versatile tool for documentation sites and technical blogs.

Quote Values

Special keywords like open-quote, close-quote, no-open-quote, and no-close-quote work with the content property for styling quotation marks. These values interact with the quote property to manage nested quotation levels automatically, handling complex quoting scenarios without manual intervention.

blockquote::before {
 content: open-quote;
}

blockquote::after {
 content: close-quote;
}

This approach elegantly handles nested blockquotes, automatically adjusting quote marks based on nesting depth. It's a semantic way to style quotations while maintaining proper typographic conventions.

attr() Function

The attr() function retrieves the value of an HTML attribute and displays it as content. This technique enables dynamic content display based on attribute values without requiring JavaScript, making it an efficient choice for displaying data attributes.

[data-label]::after {
 content: attr(data-label);
}

Practical applications include displaying tooltip labels from data-tooltip attributes, showing required field indicators in forms, and indicating file types or metadata adjacent to links. This approach keeps your HTML declarative and your styling centralized.

Practical Applications

Custom Blockquotes and Typography

One of the most common uses for the content property involves styling blockquotes with decorative quotation marks. As showcased in CSS-Tricks tutorials, pseudo-elements can transform plain text into visually appealing quote blocks without requiring additional markup. The open-quote and close-quote values interact with the CSS quote property to handle nested quotations automatically.

Form Element Styling

The content property enables complete customization of form elements like checkboxes and radio buttons. By using appearance: none to remove default browser styling and then using ::before and ::after to create custom visuals, developers achieve consistent designs across browsers while maintaining full functionality. This technique is essential for design systems that require uniform styling regardless of the user's browser or operating system. Implementing accessible form styles is a core component of our web development services, ensuring every interface element performs flawlessly across all devices and assistive technologies.

Visual Effects and Decoration

Gradient overlays, border effects, and decorative elements benefit significantly from content-based pseudo-elements. Techniques like gradient borders and image overlays become possible by positioning pseudo-elements with appropriate z-index values. CSS-Tricks demonstrates how these effects create depth and visual interest without adding complexity to the DOM.

Icon and Status Indicators

Adding icons, status indicators, or visual markers to elements is straightforward with content-based pseudo-elements. This approach keeps HTML markup clean while enabling rich visual enhancements. Common patterns include status badges, notification indicators, and decorative icons that reinforce content meaning without semantic weight.

Drop Caps and Typographic Effects

web.dev demonstrates how pseudo-elements like ::first-letter enable typographic effects such as drop caps, which would otherwise require additional HTML elements. This technique creates elegant, editorial-style typography that enhances readability and visual appeal in content-heavy designs.

Accessibility Considerations

Screen Reader Limitations

A crucial accessibility consideration is that content generated via the content property is not reliably accessible to screen readers. According to MDN Web Docs, using a ::before or ::after pseudo-element to add content is discouraged when the content carries semantic meaning. Screen readers may or may not announce generated content depending on the browser and assistive technology combination.

This limitation means that important information, navigation hints, or interactive cues should not rely solely on generated content. Alternative accessible approaches include using visually hidden but screen-reader-visible HTML elements that convey the same information. Understanding these limitations is essential for building accessible websites--our web development services prioritize accessibility from the ground up, ensuring every project meets WCAG guidelines and delivers inclusive experiences to all users.

Progressive Enhancement

When using pseudo-elements for decorative enhancements, the approach naturally provides progressive enhancement. If generated content fails to render or is not perceived by assistive technologies, the underlying content remains accessible. Users with disabilities still receive the core information while experiencing a visually enhanced version when possible.

Color and Contrast

Generated content must maintain sufficient color contrast for readability, following WCAG guidelines for text contrast. Interactive pseudo-elements require appropriate focus and hover states for keyboard accessibility. When pseudo-elements serve a functional purpose, they should be keyboard-operable and clearly indicate their interactive state through visual feedback.

Best Practices

Performance Considerations

Pseudo-elements add rendering complexity, so limiting their use on frequently animated elements or large numbers of elements helps maintain performance. Each pseudo-element requires additional layout and paint operations, which can impact rendering performance on lower-powered devices. When building performance-critical interfaces, consider whether pseudo-element decorations are essential or can be achieved through more efficient means.

Maintainability

Clear naming conventions and consistent patterns for content-based pseudo-elements improve code maintainability. Grouping related pseudo-element styles and providing comments explains the purpose of generated content for future maintainers. Establishing team conventions for when to use pseudo-elements versus additional markup creates consistent, predictable codebases that are easier to debug and extend over time.

Semantic HTML First

Reserve the content property for visual enhancements rather than semantic content. When content carries meaning that users need to understand, prefer adding appropriate HTML elements rather than relying on generated content. This approach ensures accessibility, improves SEO, and creates more predictable behavior across different devices and assistive technologies. Search engines process semantic HTML more effectively, making this practice essential for SEO services that drive organic visibility.

Testing Across Browsers

While pseudo-elements enjoy broad browser support, testing across different browsers and devices ensures consistent rendering. Some older browsers may have quirks with specific content values or display properties. Automated visual regression testing helps catch these inconsistencies before they reach production.

Troubleshooting Common Issues

Pseudo-Elements Not Rendering

When pseudo-elements fail to appear, common causes include missing content property declarations, using invalid content values like none or normal, or forgetting that pseudo-elements are inline by default. As noted in MDN Web Docs, if the content property is not specified or has an invalid value, the pseudo-element behaves as if display: none is set.

Solution: Explicitly set content: "" for decorative pseudo-elements and verify that display: block or display: inline-block is set when box model properties like padding and margins are needed.

Z-Index Issues

Pseudo-elements can appear unexpectedly behind or in front of content. Understanding the stacking context and explicitly setting z-index values resolves these issues. Remember that pseudo-elements are part of the stacking context of their parent element, so z-index values are relative to sibling elements within that parent.

Responsive Behavior

Generated content may need adjustment for different viewport sizes. Using relative units and media queries ensures pseudo-elements adapt appropriately to all devices. Test your pseudo-element implementations on mobile devices to ensure they don't create horizontal scrolling or overlap important content.

Content Not Updating Dynamically

Since pseudo-elements are generated at render time and not part of the actual DOM, they won't update automatically when underlying data changes. For dynamic content, ensure your attribute values (used with attr()) are updated when data changes, or use JavaScript to modify pseudo-element styles when needed.

Conclusion

The CSS content property, working in concert with pseudo-elements, provides a powerful toolkit for enhancing web interfaces without modifying HTML markup. From simple string values and image insertions to sophisticated counter systems and quote styling, understanding valid content values enables developers to create polished, maintainable designs that scale efficiently.

However, accessibility considerations demand that generated content remain primarily decorative, with meaningful content delivered through semantic HTML. The content property excels when used for visual enhancements--icons, decorative elements, typography effects, and UI polish--rather than conveying essential information.

By following best practices around performance, maintainability, and accessibility, and leveraging the patterns demonstrated by authoritative sources like MDN Web Docs, CSS-Tricks, and web.dev, developers can effectively use the content property to build better web experiences that are both visually appealing and accessible to all users.

Sources

1. MDN Web Docs - ::before
2. CSS-Tricks - 7 Practical Uses for ::before and ::after
3. web.dev - Pseudo-elements