CSS ::before Pseudo Element

CSS ::before Pseudo-Element

The ::before pseudo-element allows you to insert content before an element without modifying the HTML.

1. Basic Usage

✅ Adding Text Before an Element

p::before {
  content: "💡 ";
  color: orange;
}

✅ Adds a lightbulb emoji before every <p> element.

2. Adding Icons or Symbols

button::before {
  content: "🔍 ";
  font-weight: bold;
}

✅ Adds a search icon before every <button>.

3. Styling with CSS

You can style the ::before content just like any other element.

h1::before {
  content: "";
  display: block;
  width: 50px;
  height: 5px;
  background-color: blue;
  margin-bottom: 5px;
}

✅ Creates a blue line above every <h1>.

4. Using ::before for Decorative Effects

✅ Bullet Points Before List Items

li::before {
  content: "• ";
  color: red;
  font-size: 20px;
}

✅ Adds red bullet points before each <li>.

5. Creating Animated Loading Text

button::before {
  content: "⏳ Loading... ";
  display: none;
}

button.loading::before {
  display: inline-block;
}

✅ Shows "Loading..." when a button has the loading class.

6. When to Use ::before?

✔ Add icons, symbols, or decorative elements
✔ Enhance UI without extra HTML
✔ Create loading effects, labels, or tooltips