CSS - Pseudo-elements العناصر الكاذبة

CSS - العناصر الكاذبة (Pseudo-elements)

🔸 تُستخدم العناصر الكاذبة (Pseudo-elements) لإضافة تأثيرات على أجزاء معينة من العنصر مثل أول حرف أو أول سطر أو حتى لإضافة محتوى قبل أو بعد العنصر بدون تعديله في HTML.

🔹 الصيغة العامة

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

📌 لاحظ استخدام شرطتين (::) بدل واحدة كما في الـ pseudo-classes.

🧪 مثال: ::first-line

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

📌 يُطبّق التنسيق على أول سطر فقط من الفقرة.

🧪 مثال: ::first-letter

p::first-letter {
  font-size: 200%;
  color: green;
}

📌 يُطبّق التنسيق على أول حرف فقط من الفقرة.

🧪 مثال: ::before

h1::before {
  content: "👉 ";
}

📌 يُضيف هذا المحتوى قبل العنصر، وهو مفيد في التزيين أو لإضافة رموز.

🧪 مثال: ::after

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

📌 يُضيف هذا المحتوى بعد العنصر.

🧪 مثال متكامل: ::before و ::after

blockquote::before {
  content: "❝";
  font-size: 30px;
  color: gray;
}

blockquote::after {
  content: "❞";
  font-size: 30px;
  color: gray;
}

<blockquote>
  هذا اقتباس جميل.
</blockquote>

📌 ملاحظات هامة

• تأكد من استخدام content مع ::before و ::after، وإلا فلن يظهر شيء.
• يمكن استخدام pseudo-elements لأغراض تجميلية وتنسيقية فقط بدون تغيير الـ HTML فعليًا.
• استخدام شرطتين (::) هو المعيار الحديث، لكن بعض المتصفحات تدعم أيضاً استخدام واحدة (:).