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.

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