✨ اكتشف قوة الـ Pseudo-elements في CSS 🎨

اليوم سنتعرف على أداة قوية وممتعة في CSS تسمى Pseudo-elements (العناصر الزائفة). إذا كنت تتساءل عن كيفية إضافة زخارف صغيرة، أو تنسيق أول حرف في فقرة، أو حتى إضافة محتوى قبل أو بعد عنصر معين دون لمس ملف HTML، فأنت في المكان الصحيح! هيا نبدأ.

🤔 ما هي الـ Pseudo-elements (العناصر الزائفة)؟

ببساطة، الـ Pseudo-element هو كلمة مفتاحية نضيفها إلى محدد (selector) في CSS تسمح لنا بتنسيق جزء معين من عنصر HTML.

🔍 الفكرة الأساسية: تخيل أن لديك فقرة نص (<p>). باستخدام الـ Pseudo-elements، يمكنك تنسيق أول حرف فيها فقط، أو السطر الأول منها فقط، أو حتى إضافة محتوى جديد قبلها أو بعدها، كل هذا من خلال CSS فقط ودون أي تغيير في HTML.

الفرق الرئيسي بينها وبين الـ Pseudo-classes (مثل :hover) هو أن Pseudo-classes تستهدف الحالة الكاملة للعنصر (مثل عندما يمر عليه المؤشر)، بينما Pseudo-elements تستهدف جزءاً محدداً من محتوى العنصر.

📝 بناء الجملة (Syntax) الأساسي

الصيغة العامة لكتابة Pseudo-element هي كالتالي:

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

ملاحظة هامة: نستخدم نقطتين رأسيتين (::) قبل اسم الـ Pseudo-element. كان من الشائع في الماضي استخدام نقطة واحدة (:)، لكن الاستخدام الحديث يوصي باستخدام :: للتمييز بينها وبين Pseudo-classes.

🔤 أشهر أنواع الـ Pseudo-elements واستخداماتها

لنستعرض الآن أهم الـ Pseudo-elements التي ستستخدمها بشكل متكرر، مع أمثلة بسيطة على كل منها.

1. ::before و ::after

هما الأكثر شيوعاً. يستخدمان لإضافة محتوى قبل أو بعد محتوى العنصر الأصلي.

  • ::before: يُدخل المحتوى في البداية.
  • ::after: يُدخل المحتوى في النهاية.

شرط أساسي: لكي يظهر المحتوى المضاف، يجب استخدام الخاصية content داخل القاعدة. يمكن أن تكون قيمة content نصاً، أو رموزاً، أو حتى فارغة "" لأغراض التصميم.

مثال عملي: لنضيف أيقونة بسيطة قبل وبعد عنوان.

<!-- ملف HTML -->
<h1 class="fancy-title">أهلاً بالعالم!</h1>

/* ملف CSS */
.fancy-title::before {
  content: "✋ "; /* إضافة أيقونة يد قبل النص */
  color: red;
}

.fancy-title::after {
  content: " 🌍"; /* إضافة أيقونة عالم بعد النص */
  color: blue;
}

في هذا المثال، سَيُعرض العنوان كالتالي: ✋ أهلاً بالعالم! 🌍

2. ::first-letter

يستهدف أول حرف في النص الموجود داخل العنصر. مثالي لتنسيق الحرف الأول في الفقرات على شكل "Drop Cap" كما في الكتب والمجلات.

مثال عملي: لنضخم أول حرف في فقرة.

<p class="big-first-letter">هذه فقرة طويلة بعض الشيء. سنقوم بتكبير أول حرف فيها ليكون أكثر جاذبية.</p>

.big-first-letter::first-letter {
  font-size: 3em; /* تكبير حجم الخط */
  font-weight: bold; /* جعله عريضاً */
  color: darkblue; /* تغيير اللون */
  float: left; /* لجعله يطفو على يسار السطر */
  margin-right: 5px; /* إضافة مسافة بينه وبين بقية النص */
  line-height: 1; /* التحكم في ارتفاع السطر */
}

3. ::first-line

يستهدف السطر الأول من النص داخل العنصر. التنسيق سيُطبق فقط على الكلمات التي تظهر في السطر الأول، وسيتغير تلقائياً إذا تغير حجم الشاشة وانتقلت كلمات إلى سطر جديد.

مثال عملي: لتغيير لون ومظهر السطر الأول من مقال.

<article>
  <p>هذا هو السطر الأول من المقال الذي سيتم تنسيقه بشكل مختلف. أما بقية النص في الفقرة فسيبقى كما هو. لاحظ كيف أن التنسيق سيقتصر على السطر الأول فقط.</p>
</article>

article p::first-line {
  font-weight: bold; /* جعل السطر الأول عريض */
  color: purple; /* تغيير لونه */
  letter-spacing: 1px; /* زيادة المسافة بين الحروف قليلاً */
}

4. ::selection

يسمح لك بتغيير تنسيق النص عندما يقوم المستخدم بتحديده (بواسطة الفأرة أو لوحة المفاتيح).

مثال عملي: تغيير لون خلفية ولون نص التحديد.

::selection {
  background-color: yellow; /* خلفية صفراء للنص المحدد */
  color: black; /* لون النص يصبح أسود عند التحديد */
}

💡 نصائح مهمة للمبتدئين

  1. لا تنسى content: تذكر أن ::before و ::after لا يعملان بدون تعريف الخاصية content، حتى لو كانت فارغة content: "";.
  2. عناصر السطر والتخطيط: العناصر التي ينشئها ::before و ::after هي عناصر "inline" (على السطر) افتراضياً. يمكنك تغيير هذا باستخدام display: block; أو display: inline-block; إذا أردت.
  3. التجربة هي الأساس: أفضل طريقة لفهم هذه الأداة هي التجربة. أنشئ ملف HTML بسيط وجرب كل Pseudo-element بنفسك وشاهد النتائج مباشرة.