CSS · Layout and visual systems
What are pseudo-elements and what are their limits?
Short answer
Pseudo-elements style a part of an element, such as ::before, ::after, ::first-line, ::marker or ::selection. Generated content is decorative CSS, not real DOM, so it should not carry essential meaning.
A pseudo-element starts with a double colon in modern syntax. ::before and ::after create generated boxes inside the element, but only when the content property is set. Other pseudo-elements target specific fragments such as the first line or the selection highlight.
.quote::before {
content: "";
display: block;
width: 2rem;
height: 2px;
background: currentColor;
}
::selection {
background: #fde68a;
color: #111827;
}What they can do
- ::before and ::after add decorative boxes inside an element
- ::first-line and ::first-letter style typographic fragments
- ::marker styles list markers
- ::placeholder styles placeholder text
- ::selection styles the user's text selection
- They are not part of the DOM and cannot be selected or read reliably by assistive technology
Because generated content is not real content, do not put essential labels or instructions in ::before or ::after. Screen readers may announce it inconsistently, and it cannot be copied or interacted with like a normal element.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why do ::before and ::after require the content property?
- 2Is generated content accessible to screen readers?
- 3What is the difference between a pseudo-class and a pseudo-element?
- 4What does ::marker style?
Say it in the interview
Pseudo-elements style a specific part of an element, like before and after boxes, the first line, list markers or the selection highlight. Before and after only render when content is set, and they are not real DOM. That is why I keep generated content decorative and never put essential meaning there. I use double-colon syntax for new code.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.