جاري التحميل...

العناصر الزائفة في CSS

الفئة الزائفة تغيّر المظهر عندما تتغير الحالة (:hover، :focus). العنصر الزائف خطوة أبعد: يمكنك تنسيق جزء من النص، أو صنع صندوق صغير قبل أو بعد المحتوى الحقيقي — بـ نقطتين مزدوجتين (::) ودون وسوم إضافية في HTML.

ما معنى العنصر الزائف؟

العنصر الزائف كلمة تُلصق بالمحدد بـ ::. يستهدف شيئاً ليس عنصراً كاملاً في الوسم: الحرف الأول، السطر الأول، أو صندوقاً مولَّداً قبل/بعد المحتوى. لـ ::before و::after تحتاج عادةً إلى content ليظهر شيء.

أربعة عناصر زائفة شائعة

ابدأ بهذه. الشكل القديم بنقطة مفردة (:before) ما زال يعمل في متصفحات كثيرة، لكن اكتب الإملاء الحديث بالنقطتين المزدوجتين.

📊 عناصر زائفة يومية في CSS

العنصر الزائف ماذا ينسّق مثال
::before صندوق قبل محتوى العنصر p::before
::after صندوق بعد محتوى العنصر a::after
::first-letter الحرف الأول من كتلة نص p::first-letter
::first-line السطر الأول من كتلة نص p::first-line

قبل المحتوى — ::before وcontent

::before يصنع صندوقاً افتراضياً قبل النص الحقيقي. تضع content تقريباً دائماً — سلسلة، أو "" لصندوق فارغ زخرفي.

قبل — علامة اقتباس افتتاحية

css
CSS Code 
.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}

لا تنسَ content

بدون content كثير من قواعد ::before / ::after لا تُظهر شيئاً. لشريط لوني أو أيقونة خلفية يكفي content: "".

بعد المحتوى — ::after

::after نفس الفكرة بعد المحتوى — لوحدة أو شارة أو لاحقة صغيرة.

بعد — تلميح رابط خارجي

css
CSS Code 
a.external::after {
content: " ↗";
font-size: 0.85em;
}

لا تخفِ المعنى الضروري هنا

قارئات الشاشة وبعض الأدوات تتعامل مع المحتوى المولَّد بشكل غير متسق. لا تضع التعليمات المهمة فقط داخل ::before أو ::after؛ اترك النص الحقيقي في HTML.

الحرف الأول — ::first-letter

::first-letter ينسّق الحرف الأول من نص كتلة — مظهر الحرف الكبير الكلاسيكي في بداية فقرة.

الحرف الأول — حرف افتتاحي أكبر

css
CSS Code 
.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}

السطر الأول — ::first-line

::first-line ينسّق فقط أول سطر مرئي — ليس «الجملة الأولى»، بل السطر الذي يصنعه المتصفح عند التفاف النص.

السطر الأول — أثقل قليلاً

css
CSS Code 
.lead::first-line {
font-weight: 600;
color: #334155;
}

صندوق فارغ زخرفي

أحياناً تريد شريطاً لونياً فقط بلا نص. يكفي content: "".

before فارغ — شريط زخرفي

css
CSS Code 
.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}

عادات عملية

  • عنصر زائف = نقطتان مزدوجتان (::before)؛ فئة زائفة = مفردتان (:hover)
  • ضع content على ::before / ::after إن أردت شيئاً مرئياً
  • أبقِ النص الضروري في HTML لا في المحتوى المولَّد فقط
  • ::first-letter و::first-line يعملان على كتل نصية
  • فضّل :: الحديث حتى لو عمل :before القديم

جرّبها بنفسك

  1. صفحة قصيرة بفقرة .quote وفقرة .lead ورابط a.external و.card بنص.
  2. أضف .quote::before { content: "“"; color: #0f766e; } وشاهد علامة الاقتباس.
  3. على رابط class external ضع a.external::after { content: " ↗"; }.
  4. كبّر .lead::first-letter بلون فيروزي؛ واضبط .lead::first-line بـ font-weight: 600.
  5. أضف .card::before { content: ""; display: block; height: 4px; background: #0f766e; } لشريط علوي.

أخطاء شائعة

  • كتابة :before وأنت تقصد حالة مثل :hover — الحالة نقطة مفردة؛ الصندوق المولَّد مزدوجة
  • نسيان content فلا يظهر ::before / ::after
  • وضع النسخة الوحيدة من تحذير داخل ::after
  • توقع معجزة من ::first-letter على عنصر فارغ أو صورة فقط
  • خلط ::first-line بـ «الجملة الأولى» — التفاف المتصفح يحدد السطر

ملخص

  • العنصر الزائف بـ :: ينسّق جزءاً أو صندوقاً مولَّداً
  • ::before / ::after يحتاجان content (سلسلة أو "")
  • ::first-letter و::first-line يأخذان بداية كتلة النص
  • المعنى الحيوي يبقى في HTML
  • نقطة مفردة = فئة زائفة؛ مزدوجة = عنصر زائف
  • تدرب باقتباس ولاحقة رابط وفقرة lead

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
8
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 1 من 1
Css درس تعليمي