After pseudo-element in CSS - Performance & Optimization

Performance: After pseudo-element

LOW IMPACT

This affects the rendering performance by adding extra elements to the DOM visually without increasing DOM nodes, impacting paint and composite stages.

Adding decorative content after an element without extra DOM nodes

CSS

div::after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background: red;
  position: relative;
  margin-top: 10px;
}

Using relative positioning and margin avoids layout shifts and keeps flow stable.

📈 Performance Gainreduces layout recalculations and prevents CLS

Adding decorative content after an element without extra DOM nodes

CSS

div::after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background: red;
  position: absolute;
  top: 100%;
  left: 0;
}

Using absolute positioning with :after can cause layout shifts if the parent size changes or is dynamic.

📉 Performance Costmay trigger layout recalculations and cause CLS if content size changes

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using :after with absolute positioning	0 (no new DOM nodes)	1+ if layout changes	medium due to paint and composite	[!] OK
Using :after with relative positioning and margin	0	0	low paint cost	[OK] Good

Rendering Pipeline

The :after pseudo-element is generated during style calculation and painted as part of the element's layer without adding DOM nodes. It affects paint and composite stages but not layout unless positioned absolutely.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckPaint stage when complex styles or large areas are used

Core Web Vital Affected

CLS

This affects the rendering performance by adding extra elements to the DOM visually without increasing DOM nodes, impacting paint and composite stages.

Optimization Tips

1Avoid absolute positioning in :after to prevent layout shifts.

2Keep :after styles simple to minimize paint cost.

3:after does not increase DOM size but affects paint and composite.

Performance Quiz - 3 Questions

What is the main performance impact of using the :after pseudo-element?

A It blocks JavaScript execution

B It adds extra DOM nodes increasing DOM size

C It increases paint and composite cost without adding DOM nodes

D It causes network requests to load content

DevTools: Performance

How to check: Record a performance profile while interacting with the page and look for layout shifts and paint events related to the element with :after.

What to look for: Look for Layout Shift events and Paint times; minimal layout shifts and low paint cost indicate good performance.