شرح خاصية content في Css

شرح الخاصية 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.