شرح الخاصية content
في CSS
الخاصية content
في CSS تُستخدم بشكل رئيسي مع العناصر الزائفة (Pseudo-elements) مثل ::before
و ::after
. تُستخدم هذه الخاصية لإدراج محتوى نصي أو أي محتوى آخر (مثل الصور أو العداد) داخل العنصر الذي يتم تطبيق هذه العناصر الزائفة عليه.
متى تُستخدم الخاصية content
؟
تُستخدم content
عندما تريد إضافة محتوى ديناميكي أو ثابت إلى عنصر HTML دون الحاجة لتعديل HTML نفسه. هذا مفيد في تحسين قابلية الصيانة وفصل المحتوى عن التصميم.
صيغة الخاصية:
content: القيمة;
قيم الخاصية content
:
- نص عادي (String):
يمكن إضافة نص عادي داخل علامتي تنصيص (
""
أو''
)..example::before { content: "→ "; }
- سمة (Attribute):
يمكن استخدام قيمة سمة من العنصر باستخدام
attr()
.a::after { content: " (" attr(href) ")"; }
- عدادات (Counters):
تُستخدم مع العدادات (Counters) لإنشاء ترقيم تلقائي.
.example::before { content: counter(my-counter); }
- صور أو أي محتوى آخر:
يمكن إضافة رابط صورة أو أي محتوى آخر باستخدام
url()
..example::before { content: url("icon.png"); }
- قيم خاصة:
none
: لا يُضاف أي محتوى.normal
: القيمة الافتراضية، لا يُضاف أي محتوى.open-quote
وclose-quote
: تُستخدم لإضافة علامات اقتباس.no-open-quote
وno-close-quote
: تُستخدم لإزالة علامات اقتباس.
أمثلة عملية:
إضافة نص قبل وبعد العنصر:
.example::before {
content: "بداية: ";
color: red;
}
.example::after {
content: " - نهاية";
color: blue;
}
في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:
<div class="example">هذا مثال</div>
النتيجة:
"بداية: هذا مثال - نهاية"
إضافة رابط URL بعد الروابط:
a::after {
content: " (" attr(href) ")";
color: gray;
}
في هذا المثال، عند تطبيق هذه الأنماط على الرابط التالي:
<a href="https://example.com">زيارة الموقع</a>
النتيجة:
"زيارة الموقع (https://example.com)"
استخدام العدادات:
body {
counter-reset: section;
}
h5::before {
counter-increment: section;
content: "القسم " counter(section) ": ";
}
في هذا المثال، عند تطبيق هذه الأنماط على العناوين التالية:
<h5>عنوان 1</h5>
<h5>عنوان 2</h5>
النتيجة:
"القسم 1: عنوان 1"
"القسم 2: عنوان 2"
إضافة أيقونة قبل العنصر:
.button::before {
content: url("icon.png");
margin-right: 5px;
}
في هذا المثال، عند تطبيق هذه الأنماط على الزر التالي:
<button class="button">انقر هنا</button>
النتيجة:
سيظهر زر مع أيقونة قبل النص.
ملاحظات مهمة:
- العناصر الزائفة فقط:
الخاصية
content
تعمل فقط مع العناصر الزائفة::before
و::after
. - لا تدعم HTML:
لا يمكن إضافة عناصر HTML داخل
content
، فقط نصوص أو صور أو قيم أخرى. - التأثير على التخطيط:
إضافة محتوى باستخدام
content
يؤثر على تخطيط الصفحة، لذا يجب مراعاة ذلك في التصميم. - الدعم في المتصفحات:
الخاصية
content
مدعومة في جميع المتصفحات الحديثة.
استخدامات متقدمة:
إضافة علامات اقتباس:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:
<q>هذا نص بين علامتي اقتباس</q>
النتيجة:
"هذا نص بين علامتي اقتباس"
إضافة محتوى شرطي:
يمكن استخدام content
مع @media
لإضافة محتوى مختلف بناءً على حجم الشاشة.
@media (max-width: 600px) {
.example::before {
content: "صغير";
}
}
@media (min-width: 601px) {
.example::before {
content: "كبير";
}
}
الخلاصـــة
الخاصية content
في CSS هي أداة قوية لإضافة محتوى ديناميكي أو ثابت إلى العناصر باستخدام العناصر الزائفة ::before
و ::after
. يمكن استخدامها لإضافة نصوص، صور، عدادات، أو حتى قيم السمات، مما يجعلها مفيدة في تحسين تجربة المستخدم وتخصيص التصميم دون الحاجة لتعديل HTML.