What is Before pseudo-element in CSS?

CSSmarkup~5 mins

Before pseudo-element in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.