Beginner LevelCSS & Modern Layouts
What are CSS pseudo-elements (::before, ::after) and how are they used?
❓ Interview Prompt: Explain ::before and ::after pseudo-elements, the content property requirement, and practical decoration use cases.
Pseudo-elements create virtual child nodes that exist only in the CSS rendering tree (not in the HTML DOM):
•
`::before`: Inserts generated content before the element's real children.
•
`::after`: Inserts generated content after the element's real children.
Rules:
1
The
content property is mandatory (even if empty: content: "").2
They are inline by default but can be changed to
display: block.3
They cannot be applied to void elements like
<img>, <input>, or <br>.4
They are not part of the DOM, so screen readers may skip them (use only for decorative purposes).
Code Implementation Example
css
/* Decorative quote marks */
blockquote::before {
content: "\201C"; /* Unicode left double quote */
font-size: 3rem;
color: #886f68;
}
/* Required field asterisk */
label.required::after {
content: " *";
color: red;
}
/* Clearfix hack (legacy) */
.clearfix::after {
content: "";
display: table;
clear: both;
}💡Decorative quotes, required asterisks, and clearfix using pseudo-elements.
🎯 Interview Key Takeaway
Pseudo-elements are for decorative styling only. Never use them for meaningful content that screen readers need to access.
#Pseudo-elements#Content#Decoration#Beginner
Back to all CSS & Modern Layouts Questions→