Before pseudo-element in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the ::before pseudo-element in CSS?

It is a way to insert content before the content of an element without changing the HTML. It helps add decorative or informative content using CSS only.

beginner

How do you add text before an element using ::before?

Use content property inside ::before. For example: p::before { content: 'Note: '; } adds 'Note: ' before every paragraph.

intermediate

Can ::before add images or icons?

Yes! You can add images using content: url('image.png'); or use Unicode characters like icons with content: '\2605'; for a star symbol.

beginner

Does ::before affect the actual HTML structure?

No, it only changes what the user sees by adding content visually before the element's content. The HTML stays the same.

beginner

What must you always include when using ::before to show content?

You must include the content property. Without it, the ::before pseudo-element will not appear.

Which CSS property is required to make ::before display content?

A display

B position

C content

D visibility

The content property defines what the ::before pseudo-element shows. Without it, nothing appears.

Where does the ::before pseudo-element insert content?

A At the end of the document

B Before the element's content inside the element

C Outside the element in the HTML

D After the element's content

::before inserts content just before the element's own content, inside the element.

Can ::before change the HTML source code?

A No, it only changes visual display

B Yes, it adds new HTML elements

C Yes, it edits the HTML

D No, it deletes HTML elements

::before only adds visual content via CSS. The HTML source remains unchanged.

Which of these is a valid way to add a star symbol before a heading using ::before?

A h1::before { content: '\2605'; }

B h1::before { content: 'star'; }

C h1::before { content: url('star.png'); }

D Both C and D

You can add a star using Unicode with \2605 or an image URL. Both are valid.

What happens if you omit the content property in ::before?

A The pseudo-element is invisible

B The pseudo-element still shows

C The element's content disappears

D The browser shows an error

Without content, the ::before pseudo-element does not display anything.

Explain how the ::before pseudo-element works and how you use it to add content before an element.

Think about adding decorations or notes without touching HTML.

Describe a real-life example where using ::before would be helpful in a webpage design.

Imagine you want to add something small before text without changing the page code.