Before pseudo-element in CSS - Performance & Optimization

Performance: Before pseudo-element

MEDIUM IMPACT

This affects the rendering performance by adding extra elements to the DOM visually, which can increase paint and composite work.

Adding decorative content before an element without extra HTML

CSS

p::before { content: ''; display: inline-block; width: 200px; height: 200px; background-image: url('small-icon.svg'); background-size: contain; background-repeat: no-repeat; }

Using a small SVG as background with fixed size reduces paint cost and prevents layout shifts.

📈 Performance Gainsingle paint, stable layout, reduced CLS

Adding decorative content before an element without extra HTML

CSS

p::before { content: url('large-image.png'); display: inline-block; width: 200px; height: 200px; }

Using a large image in ::before increases paint cost and can cause layout shifts if dimensions are not reserved properly.

📉 Performance Costtriggers multiple paints and can cause CLS if size is not fixed

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large image in ::before	No extra DOM nodes, but visual layer added	1 reflow if size not fixed	High paint cost due to large image	[X] Bad
Small SVG background in ::before	No extra DOM nodes, visual layer added	No reflow with fixed size	Low paint cost with vector image	[OK] Good

Rendering Pipeline

The ::before pseudo-element is generated during style calculation and layout stages, adding a visual layer before the element's content. It requires paint and composite steps to render the added content.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckPaint

Core Web Vital Affected

CLS

This affects the rendering performance by adding extra elements to the DOM visually, which can increase paint and composite work.

Optimization Tips

1Avoid large images in ::before to reduce paint cost.

2Always set fixed width and height on ::before to prevent layout shifts.

3Use simple content like text or small SVG backgrounds for better performance.

Performance Quiz - 3 Questions

What is a common performance issue when using large images in ::before pseudo-elements?

A Increased paint cost and possible layout shifts

B Increased JavaScript execution time

C More HTTP requests for HTML files

D Slower CSS selector matching

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the paint and composite events related to the element with ::before.

What to look for: Look for long paint times or layout shifts caused by the pseudo-element to identify performance issues.

Practice

1. What does the CSS ::before pseudo-element do?

easy

A. It changes the background color of an element.

B. It inserts content before the element's main content without changing HTML.

C. It removes the element from the page.

D. It adds content after the element's main content.

Solution

1. Step 1: Understand the role of ::before

   The ::before pseudo-element inserts content before the main content of an element without modifying the HTML structure.

2. Step 2: Compare with other options

   Options B, C, and D describe different CSS behaviors unrelated to ::before. It adds content after the element's main content. describes ::after, not ::before.

3. Final Answer:

   It inserts content before the element's main content without changing HTML. -> Option B

4. Quick Check:

   ::before adds content before = A [OK]

Hint: Remember ::before adds content before element text [OK]

Common Mistakes:

• Confusing ::before with ::after
• Thinking it changes HTML structure
• Assuming it styles background only

2. Which CSS property is required to display content with ::before?

easy

A. display

B. visibility

C. position

D. content

Solution

1. Step 1: Identify the key property for ::before

   The content property is mandatory to show anything with ::before. Without it, no content appears.

2. Step 2: Check other properties

   Properties like display, position, and visibility affect layout or visibility but do not create content.

3. Final Answer:

   content -> Option D

4. Quick Check:

   content property shows ::before content = B [OK]

Hint: Use content property to show ::before content [OK]

Common Mistakes:

• Forgetting to add content property
• Using display instead of content
• Assuming position creates content

3. What will be the visible output of this CSS?

p::before { content: "Hello "; }

<p>Given HTML: <p>World</p>

medium

A. Hello World

B. World Hello

C. Hello

D. World

Solution

1. Step 1: Understand ::before content insertion

   The ::before adds "Hello " before the paragraph's original text "World".

2. Step 2: Combine the inserted and original text

   The final visible text is "Hello World" because the pseudo-element content appears before the original content.

3. Final Answer:

   Hello World -> Option A

4. Quick Check:

   Inserted content before text = D [OK]

Hint: ::before content appears before element text [OK]

Common Mistakes:

• Ignoring the original text
• Thinking content replaces text
• Confusing order of content

4. Identify the error in this CSS code:

h1::before { content; "Note: "; color: red; }

medium

A. Color property cannot be used with ::before

B. Wrong pseudo-element syntax

C. Missing colon after content property

D. content value must be numeric

Solution

1. Step 1: Check syntax of content property

   The code uses content; "Note: " which is incorrect. It should be content: "Note: " with a colon.

2. Step 2: Verify other parts

   The pseudo-element syntax h1::before is correct, color can be used, and content can be any string, so other options are wrong.

3. Final Answer:

   Missing colon after content property -> Option C

4. Quick Check:

   Property syntax needs colon = C [OK]

Hint: Use colon after property names in CSS [OK]

Common Mistakes:

• Using semicolon instead of colon after property
• Miswriting pseudo-element syntax
• Thinking color can't style ::before

5. How can you use ::before to add a red asterisk (*) before all required form labels for accessibility?

hard

A. label.required::before { content: "*"; color: red; }

B. label::before { content: "*"; color: red; }

C. label.required { content: "*"; color: red; }

D. label.required::after { content: "*"; color: red; }

Solution

1. Step 1: Target only required labels

   Use the selector label.required::before to add content only before labels with class "required".

2. Step 2: Add red asterisk before label text

   Set content: "*" and color: red to show a red star before the label text for accessibility.

3. Final Answer:

   label.required::before { content: "*"; color: red; } -> Option A

4. Quick Check:

   Use ::before with content and color on required labels = A [OK]

Hint: Use class selector with ::before and content '*' [OK]

Common Mistakes:

• Using ::after instead of ::before
• Adding content to label without ::before
• Applying content property directly on label without pseudo-element