What does the ::before pseudo-element do? What does the ::after pseudo-element do?

Q: What does the ::before pseudo-element do? What does the ::after pseudo-element do?

The `::before` and `::after` pseudo-elements in CSS allow you to insert content before or after an element's actual content without modifying the HTML structure. `::before` inserts content before the element's content. `::after` inserts content after the element's content. Both pseudo-elements require the `content` property to display anything. They are often used for decorative purposes, icons, or additional styling cues. p::before { content: '★ '; color: gold; } p::after { content: ' ✨'; color: gold; } This paragraph has a star before and sparkles after. In this example, `::before` adds a star before the paragraph text, and `::after` adds sparkles after the text. The original HTML remains unchanged. Always use the `content` property when using `::before` or `::after`. Use these pseudo-elements for decoration or styling, not for essential content. Combine with other CSS properties like `color`, `font-size`, and `background` for visual effects. Test across browsers to ensure consistent display.

Difficulty: 3/10

pseudo-elements, CSS content injection, layout manipulation

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

The ::before and ::after pseudo-elements in CSS allow you to insert content before or after an element's actual content without modifying the HTML structure.

Key Points

1
::before inserts content before the element's content.
2
::after inserts content after the element's content.
3
Both pseudo-elements require the content property to display anything.
4
They are often used for decorative purposes, icons, or additional styling cues.

Example: Using ::before and ::after

In this example, ::before adds a star before the paragraph text, and ::after adds sparkles after the text. The original HTML remains unchanged.

Best Practices

1
Always use the content property when using ::before or ::after.
2
Use these pseudo-elements for decoration or styling, not for essential content.
3
Combine with other CSS properties like color, font-size, and for visual effects.

Scenario Questions

0-2 years experience

2-5 years experience

1A tooltip component’s ::after arrow is misaligned on mobile — how would you debug and fix it?

Follow-up Questions