Before pseudo-element in CSS - Browser Rendering Trace

Render Flow - Before pseudo-element

Parse CSS selector with ::before

↓

Create virtual ::before element

↓

Insert ::before as first child of target element

↓

Apply styles to ::before

↓

Calculate layout including ::before

↓

Paint ::before content

↓

Composite all layers

The browser reads the CSS selector with ::before, creates a virtual element before the target's content, applies styles, and includes it in layout and painting.

Render Steps - 3 Steps

Code Added:<p>Hello World</p>

Before

[p]
| Hello World

→

After

[p]
| Hello World

Initial paragraph with text only, no pseudo-element yet.

🔧 Browser Action:Creates DOM node for <p> with text child

Code Sample

Adds a red star before the paragraph text visually.

CSS

<p>Hello World</p>

CSS

p::before {
  content: "★ ";
  color: red;
  font-weight: bold;
}

Render Quiz - 3 Questions

After applying step 2, what do you see before the paragraph text?

A The paragraph text is replaced by a star

B Nothing changes visually

C A star character appears before the text

D A star appears after the paragraph text

Common Confusions - 3 Topics

Why don't I see anything when I use ::before without content?

The ::before pseudo-element requires the content property to display anything. Without content, it creates no visible box.

💡 Always set content property to show ::before content.

Why does the ::before content appear inside the element, not outside?

::before inserts content as the first child inside the element, so it appears before the element's text but still inside its box.

💡 ::before is inside the element's box, not outside.

Why can't I select or interact with ::before content directly?

::before is a virtual element, not in the DOM tree, so you can't select it with JavaScript or interact like normal elements.

💡 ::before is visual only, not a real DOM node.

Property Reference

Property	Value Applied	Effect on ::before	Common Use
content	"text" or "" or none	Defines what appears inside ::before, required to show anything	Add symbols, text, or images before content
color	color value	Changes text color of ::before content	Highlight or decorate inserted content
font-weight	normal, bold, etc.	Sets thickness of ::before text	Emphasize inserted text
display	inline (default), block, inline-block	Controls layout of ::before element	Change positioning or size of inserted content
margin	length values	Adds space around ::before element	Separate inserted content from main content

Concept Snapshot

The ::before pseudo-element inserts content before an element's text. It requires the content property to display anything. Styles like color and font-weight affect only ::before content. It is inside the element's box, as the first child. ::before is virtual and not part of the DOM tree.