CSS Academy · درس

محتوى ::before و::after

أدرج محتوى مُولّدًا قبل العناصر أو بعدها باستخدام ::before و::after مع الخاصية content

محتوى ::before و::after درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

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

تنشئ العناصر الزائفة عناصر افتراضية يمكن تنسيقها كما لو كانت جزءًا من DOM. وتستخدم نقطتين رأسيّتين ::. وأكثرها استخدامًا هما ::before و::after.

::before و::after

تُدرج ::before محتوى مُنشأً قبل محتوى العنصر. وتدرجه ::after بعده. ويتطلب كلاهما خاصية content لعرض المحتوى.

<span class="element">Text with generated content</span>

خاصية content

تقبل الخاصية content ما يلي:

سلسلة نصية: content: "text"
سلسلة نصية فارغة: content: "" (وهو أمر شائع للأشكال التزيينية)
عنوان URL: content: url("icon.svg")
عدّاد: content: counter(step)
‏attr(): content: attr(data-tooltip)

علامات الاقتباس التزيينية

أضيفوا علامات اقتباس نمطية دون إضافتها إلى HTML:

<blockquote>Design is not just what it looks like — design is how it works.</blockquote>

أشكال باستخدام content فارغ

يؤدي ضبط content: "" مع تحديد الموضع والأبعاد إلى إنشاء أشكال تزيينية دون الحاجة إلى HTML إضافي:

<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>

إزالة تأثير التعويم باستخدام ::after

تستخدم طريقة clearfix التقليدية ::after لإزالة تأثير العناصر العائمة دون الحاجة إلى ترميز إضافي:

<div class="clearfix" style="border:1px solid #ccc;">
  <div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>

تلميح باستخدام ::after

تلميح باستخدام CSS فقط، بالاعتماد على ::after وattr():

<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>

أيقونة باستخدام content: url()

أدرجوا أيقونة صغيرة قبل الروابط باستخدام content: url():

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

قيود العناصر الزائفة

لا توجد العناصر الزائفة في DOM. فهي:

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

لا تضعوا أبدًا محتوى أساسيًا في المحتوى المُنشأ، واستخدموا العناصر الزائفة للأغراض التزيينية فقط.

النقطتان المفردتان مقابل النقطتين المزدوجتين

كانت النقطتان المفردتان (:before) صيغة CSS2. أما النقطتان المزدوجتان (::before) فهما المعيار في CSS3، إذ تميزان العناصر الزائفة عن الفئات الزائفة. تعمل الصيغتان في المتصفحات الحديثة، لكن استخدموا النقطتين المزدوجتين في الشيفرة الجديدة.

العناصر التي تدعم ::before و::after

لا يمكن أن تحتوي العناصر المستبدلة (img وinput وselect وvideo) على عناصر زائفة، إذ لا تحتوي على منطقة محتوى يمكن الإدراج فيها. استخدموا عنصرًا حاويًا بدلًا من ذلك لإضافة التزيين.

تحقق سريع

ما قيمة content المطلوبة لعنصر زائف تزييني ::before لا يحتوي على نص مرئي؟

مراجعة

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

الأسئلة الشائعة

هل درس «محتوى ::before و::after» مجاني؟

نعم — نص درس «محتوى ::before و::after» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «محتوى ::before و::after»؟

أدرج محتوى مُولّدًا قبل العناصر أو بعدها باستخدام ::before و::after مع الخاصية content تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «محتوى ::before و::after»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy