Pseudo-element ها به ما این امکان رو میدن که قسمتی خاص از یک عنصر رو انتخاب کنیم یا حتی یک بخش مجازی جدید ایجاد کنیم، بدون اینکه نیاز باشه توی HTML تگی اضافه کنیم.

📌 شکل کلی نوشتن:

selector::pseudo-element {
  property: value;
}

✅ پرکاربردترین Pseudo-elements

1️⃣ ::before

یک محتوای مجازی قبل از عنصر ایجاد می‌کنه.

p::before {
  content: "👉 ";
  color: red;
}

🔹 قبل از هر <p> یک فلش قرمز میاد.

2️⃣ ::after

یک محتوای مجازی بعد از عنصر ایجاد می‌کنه.

p::after {
  content: " ✔";
  color: green;
}

🔹 بعد از هر <p> یک تیک سبز نمایش داده میشه.

3️⃣ ::first-line

فقط خط اول متن رو استایل میده.

p::first-line {
  font-weight: bold;
  color: blue;
}

4️⃣ ::first-letter

فقط اولین حرف متن رو استایل میده.

p::first-letter {
  font-size: 2rem;
  color: red;
}

5️⃣ ::selection

قسمتی از متن که کاربر انتخاب (هایلایت) می‌کنه.

p::selection {
  background: yellow;
  color: black;
}

📌 مثال ترکیبی

<p>یادگیری CSS خیلی جذاب است!</p>

p::before {
  content: "🔥 ";
}
p::after {
  content: " 🚀";
}
p::first-line {
  color: blue;
}
p::first-letter {
  font-size: 2rem;
  font-weight: bold;
}
p::selection {
  background: orange;
  color: white;
}

🔹 نتیجه:

• یک 🔥 اول جمله میاد

• یک 🚀 آخر جمله میاد

• خط اول متن آبی میشه

• اولین حرف خیلی بزرگ و پررنگ میشه

• وقتی متن رو انتخاب می‌کنی، رنگ هایلایت نارنجی میشه

✨ خلاصه:

• Pseudo-class → وضعیت یا حالت یک عنصر (مثلاً hover, active, first-child).

• Pseudo-element → بخشی از محتوای عنصر یا محتوای مجازی (::before, ::after, ::first-line).