You can insert content before or after an element using the ::before and ::after pseudo-elements in CSS. These pseudo-elements allow adding decorative or informational content without changing the HTML.

Key Points

1
Use ::before to insert content before an element's existing content.
2
Use ::after to insert content after an element's existing content.
3
The content property is required to display any inserted content.
4
Pseudo-elements are useful for decorative purposes, icons, counters, or styling enhancements.

Example: Adding Content Using ::before and ::after

In this example, ::before inserts a star before the paragraph text, and ::after inserts sparkles after the text, without modifying the HTML structure.

Best Practices

1
Always include the content property when using ::before or ::after.
2
Use pseudo-elements for decoration or stylistic purposes rather than essential content.
3
Combine with CSS properties like color, font-size, background, and margin for better visual effects.
4
Check browser compatibility to ensure consistent rendering.

Difficulty: 3/10

Topics: pseudo-element syntax, content insertion, visual decoration

Scenario Questions

0-2 years experience

1
How would you add a star icon after every review rating using only CSS, without changing the HTML?
2
What happens if you set content: '' on a ::before pseudo-element but don't define width or height?
3
You're trying to insert a tooltip with ::after, but it's not showing up — what are the top three things you'd check?

2-5 years experience

1
A designer wants a decorative divider between list items using ::after, but it's overlapping with the next item on mobile — how do you fix it without adding extra markup?
2
We added a loading spinner using ::before on a button, but now screen readers announce the content — how do you make it accessible?
3
Our pseudo-element tooltip works in Chrome but disappears in Safari — what could be causing this and how would you debug it?

5-8 years experience

1
You're building a reusable card component that uses pseudo-elements for badges and borders — how do you ensure they don't interfere with internationalization or dynamic content length?
2
A performance audit shows layout thrashing on a page with 50+ components using ::before for icons — what alternatives would you consider and why?
3
How would you design a theming system where pseudo-element colors and content change based on user preferences, without duplicating CSS rules?

8+ years experience

1
We're migrating a legacy UI that relies heavily on pseudo-elements for core functionality — how do you assess the technical debt and plan a transition to semantic HTML without breaking accessibility or design consistency?
2
How would you architect a design system where pseudo-element usage is standardized across 10+ teams, ensuring maintainability, performance, and compliance with WCAG?
3
A cross-team component library uses ::after for visual indicators, but now we need to support dynamic RTL layouts and dark mode — what architectural decisions would you make to future-proof this?

Follow-up Questions

❓What happens if you try to use ::before on a <span> that has display: inline?
❓Why can't you interact with pseudo-elements using JavaScript?
❓How would you make sure your pseudo-element doesn't break in a high-contrast mode?