Bird
Raised Fist0
CSSmarkup~5 mins

Before pseudo-element in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

The ::before pseudo-element lets you add content before an element's main content without changing the HTML. It helps decorate or add extra info visually.

Add icons or symbols before text without changing HTML.
Insert decorative elements like quotes before paragraphs.
Show labels or badges before buttons or links.
Add stylistic flourishes like lines or shapes before headings.
Syntax
CSS
selector::before {
  content: "your content here";
  /* other styles */
}

The content property is required; it defines what appears before the element.

You can style the ::before element with colors, fonts, spacing, and more.

Examples
Adds a gold star before every paragraph.
CSS
p::before {
  content: "ā˜… ";
  color: gold;
}
Inserts a large quote mark before all <h2> headings.
CSS
h2::before {
  content: "ā";
  font-size: 2rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
Shows a link icon before every link.
CSS
a::before {
  content: "šŸ”— ";
}
Sample Program

This example adds a teal colored pointer emoji before each paragraph's text using the ::before pseudo-element.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Before Pseudo-element Example</title>
  <style>
    p::before {
      content: "šŸ‘‰ ";
      color: teal;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This paragraph has a pointer before it.</p>
  <p>Another paragraph with the same style.</p>
</body>
</html>
OutputSuccess
Important Notes

The ::before element is inline by default, so it flows with text.

Always set the content property; otherwise, nothing shows.

You cannot add interactive content (like buttons) with ::before, only visual content.

Summary

::before adds content before an element's main content without changing HTML.

You must use the content property to show anything.

It is great for decoration, icons, or extra info before text.

Practice

(1/5)
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