خاصية المحتوى المُولّد (content)
آخر تحديث: 2026-09-13
content خاصية المحتوى المُولّد (content)
تُدرج خاصية content محتوى مُولّدًا قبل العنصر أو بعده وهي مطلوبة من العناصر الزائفة ::before و ::after. يمكنها إدراج سلاسل نصية أو صور أو قيم عدّاد أو قيم سمات، وكثيرًا ما تُستخدم لإضافة محتوى زخرفي أو مسح الطافيات أو عرض عناوين الروابط دون تغيير HTML.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
content: normal | none | <string> | <image> | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | none | <string> | <image> | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote | كلمة مفتاحية | المحتوى المُولّد |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| content | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لا يُفعّل content إلا على العناصر الزائفة ::before و ::after؛ وإغفاله يعني أن العنصر الزائف لا يُولّد أصلًا.
مهم： لا يقرأ قارئ الشاشة المحتوى المُدرج عبر content، لذا يجب ألا يحتوي على معلومات جوهرية لفهم الصفحة.
❓ الأسئلة الشائعة
Qما الفرق بين خاصية content والكتابة مباشرة في HTML؟
Aالمحتوى المُدرج عبر content يعيش في طبقة العرض: فهو ليس جزءًا من DOM ولا يمكن تحديده أو نسخه ولا تُفهرسه محركات البحث — وهو مناسب للزخرفة (الأيقونات ورموز البادئة/اللاحقة وأرقام العدّاد). أمّا المحتوى الذي يحمل معلومات جوهرية فيجب أن يكون في HTML، وبما أن قارئ الشاشة قد لا ينطق المحتوى المُولّد، فلا ينبغي أن ينقل الدلالة الأساسية.
Qكيف أُدرج صورة باستخدام content؟
Aاستخدم content: url(image.png); لوضع صورة عند موضع العنصر الزائف، وهو مفيد لأيقونات صغيرة قبل الروابط أو العناوين. لكن url() لا تمنح تحكمًا في الحجم أو المحاذاة. يُفضّل استخدام content: "" مع background-image و background-size، أو خط أيقونات، أو SVG مضمّن.
Qلماذا يجب أن يحتوي ::before/::after دائمًا على content: ""؟
Aلا يُولّد العنصر الزائف إلا عند تعيين content، حتى لو كانت سلسلة فارغة ""؛ وإلا فلن يُعرض العنصر الزائف بأكمله. من استخدامات content الفارغ: رسم عناصر زخرفية عبر position، أو مسح الطافيات (content: "" + display: table)، أو حجز مساحة لأيقونة خلفية. وcontent هي فعليًا 'المفتاح' الذي يُشغّل العنصر الزائف.
Qما القيم التي تدعمها content؟
Aالسلاسل النصية (مثل "✓")، والصور عبر url()، والعدّادات عبر counter(name)/counters()، وقيم السمات عبر attr(href)، والكلمات المفتاحية للاقتباس open-quote/close-quote، إضافة إلى normal و none. ولا يقرأ attr() سوى سمات نصية؛ ويُستخدم عادةً في أنماط الطباعة لعرض عنوان URL كامل بعد الروابط.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
العنصر الزائف ::before
يُدرج محتوى مُولّدًا قبل العنصر
خاصية counter-increment
تُستخدم مع content للترقيم التلقائي
