Questions
20 of 45
1What is a pseudo-element in CSS?
2How are pseudo-elements different from pseudo-classes?
3What is the syntax of a pseudo-element?
4Name some commonly used pseudo-elements.
5What does the ::before pseudo-element do? What does the ::after pseudo-element do?
6How can you insert content using pseudo-elements?
7What is the difference between :before and ::before? Why were pseudo-elements changed from one colon (:) to two (::) in CSS3?
8What does the ::first-letter pseudo-element do?
9What does the ::first-line pseudo-element do?
10How can you style the first line of a paragraph differently?
11Can pseudo-elements be styled with animations or transitions?
12What’s the difference between using ::before and ::after?
13Can pseudo-elements be positioned using CSS positioning properties? Can pseudo-elements have background images or colors? How can you use pseudo-elements to create shapes or icons?
14Can you use multiple pseudo-elements on the same element?
15What is the ::selection pseudo-element used for?
16How does stacking and z-index affect pseudo-elements?
17Can pseudo-elements have child elements or content inside them?
18Can you apply pseudo-elements to replaced elements (like <img>)?
19How do pseudo-elements interact with display and overflow properties?
20What’s the difference between using pseudo-elements and real elements for decoration?
21How does inheritance work with pseudo-elements?
22Can pseudo-elements trigger JavaScript events (like click)?
23How can you control the generated content with pseudo-elements using attr()?
24Can pseudo-elements be used inside flex or grid layouts?
25How do you control the stacking order of ::before and ::after pseudo-elements?
26How can you create a tooltip using pseudo-elements?
27How can you make a custom underline or highlight effect using ::after?
28How can you make a quotation mark appear before a paragraph using pseudo-elements?
29How do you create a triangle or arrow shape using only CSS pseudo-elements?
30How can you use pseudo-elements to add icons without extra markup?
31How can you create a button hover animation using ::before or ::after?
32How can pseudo-elements help in implementing skeleton loaders or shimmer effects?
33How can you use ::before and ::after to clear floats?
34How can you create a border animation using pseudo-elements?
35How can pseudo-elements be used in responsive design?
36What is the ::marker pseudo-element and when is it used?
37What does the ::placeholder pseudo-element do?
38How does ::cue work with media elements?
39What is ::backdrop, and where is it used?
40What is the difference between ::file-selector-button and other input pseudo-elements?
41How does the ::part() pseudo-element work in Web Components?
42How is ::slotted() different from ::part() in shadow DOM styling?
43Can you style text highlights with pseudo-elements?
44How can ::selection be customized for accessibility and branding?
45What are the limitations of pseudo-elements compared to actual DOM elements?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
20 / 45

What’s the difference between using pseudo-elements and real elements for decoration?

Difficulty: 6/10
pseudo-elements, semantic HTML, CSS rendering performance

Pseudo-Elements vs Real Elements for Decoration in CSS

Pseudo-elements (::before, ::after, ::first-letter, etc.) allow you to insert decorative or stylistic content without modifying the HTML. In contrast, real elements like <span> or <div> require actual HTML markup and exist in the DOM.

Key Differences
  1. 1

    Pseudo-elements are virtual; they do not exist in the DOM, whereas real elements are part of the DOM tree.

  2. 2

    Pseudo-elements are ideal for simple decorations, icons, or visual enhancements that don’t need interactivity.

  3. 3

    Real elements can hold child elements, receive events, and be manipulated with JavaScript, making them suitable for interactive content.

  4. 4

    Using pseudo-elements reduces HTML clutter and keeps markup semantic, while real elements increase HTML complexity.

  5. 5

    Pseudo-elements rely on the content property for insertion, while real elements can contain any HTML content.

Example: Decoration with ::before vs Real Element

In this example, the first paragraph uses ::before to insert a star without extra HTML. The second paragraph uses a real <span> element, which works similarly visually but requires markup changes and could increase DOM complexity.

Best Practices
  1. 1

    Use pseudo-elements for non-interactive decorations or visual enhancements.

  2. 2

    Use real elements when content needs to be interactive or accessible via JavaScript.

  3. 3

    Combine pseudo-elements with CSS properties like color, background, transform, or border for visual effects.

  4. 4

    Keep HTML semantic and clean by avoiding unnecessary elements when pseudo-elements suffice.

Scenario Questions

0-2 years experience

  1. 1You're building a button with a small arrow icon on the right — how would you decide whether to use a ::after pseudo-element or a real <span> inside the button?
  2. 2If you use a ::before to add a star icon for a featured tag, but the icon doesn't show up on mobile, what are the first three things you'd check?
  3. 3A designer gives you a mock with a decorative border gradient — you're told not to add extra HTML. How would you implement it using pseudo-elements?

2-5 years experience

  1. 1A team member used pseudo-elements for all decorative icons in the app, but now accessibility audits are failing — how would you explain the issue and propose a fix?
  2. 2We're seeing layout shifts on slow networks because decorative ::before elements are loaded late — what’s likely causing this, and how would you stabilize it?
  3. 3A component uses 3 real <div> elements just for visual spacing and borders. The CSS is getting messy. How would you refactor this using pseudo-elements without breaking existing functionality?

5-8 years experience

  1. 1In a high-traffic product page, we have 50+ pseudo-elements used for decorative borders and icons — how would you evaluate whether this impacts rendering performance or accessibility, and what metrics would you track?
  2. 2Our design system uses pseudo-elements for tooltips and callouts, but they break in RTL layouts and screen readers. How would you redesign this to be maintainable across global markets?
  3. 3A legacy component uses real elements for purely visual decoration, bloating the DOM tree. You're tasked with refactoring to pseudo-elements — what edge cases would you test, and how would you ensure no regressions in dynamic content?

8+ years experience

  1. 1We're migrating from a legacy UI framework that relied on 200+ decorative <span> elements to a modern CSS-in-JS system — how would you architect a migration strategy that balances performance, accessibility, and developer experience?
  2. 2Our design system has inconsistent use of pseudo-elements vs. real elements across 12 product teams — how would you define and enforce a policy that scales without stifling autonomy?
  3. 3A major accessibility audit found that pseudo-elements used for status indicators are not announced by screen readers. As a staff engineer, how would you lead a cross-team initiative to fix this without breaking hundreds of components?

Follow-up Questions

  • How would you debug a layout issue where a ::before element isn't rendering?
  • What happens if you try to attach an event listener to a ::after pseudo-element?
  • When would you choose a real <span> over a ::before for a decorative icon?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.