الدرس 6 من 8

العناصر الوهمية

هدف الدرس

زخرفة وحالات بلا وسوم جديدة

01

الشرح

::before و::after عنصران وهميّان يولّدهما CSS داخل العنصر، قبل محتواه أو بعده، بلا وسم في الـ HTML. مكانهما الزخرفة: سهم، علامة اقتباس، أيقونة صغيرة — ما لا يضيف إلى المحتوى معنًى.

شرطهما الأول content: بلاها لا يُرسم شيء، ولو كانت نصًّا فارغًا content: "". والفخّ الثاني أنهما سطريّان افتراضيًّا، والعنصر السطري لا يقبل transform: تكتب الحركة فلا يتحرّك شيء، حتى تجعله inline-block.

ثم الحالات: :hover لمن يحرّك الفأرة، و:focus-visible لمن يتنقّل بلوحة المفاتيح. الثانية تظهر مع Tab وتغيب مع نقرة الفأرة، فلا حجّة لإلغاء إطار التركيز.

02

المطلوب

أضف السهم ↓ قبل نصّ .download بـ ::before واجعله inline-block، وحرّكه بـ transform عند :hover، وأعطِ الرابط إطارًا ظاهرًا عند :focus-visible.

معايير التصحيح

4 معايير
  1. ::before يولّد السهم
  2. السهم inline-block فيقبل الحركة
  3. :hover يحرّك السهم بـ transform
  4. :focus-visible يرسم إطارًا ظاهرًا
index.html
المعاينة
index.html100%
–/4

اضغط «تشغيل» ليبدأ الفحص.

4 معايير في بطاقة «المطلوب».