شرح العنصر::before في Css

شرح العنصر ::before في CSS

العنصر ::before هو أحد العناصر الزائفة (Pseudo-elements) في CSS، ويُستخدم لإضافة محتوى قبل محتوى العنصر الأصلي. يُستخدم عادةً مع الخاصية content لإدراج نص، أيقونات، أو أي محتوى آخر قبل العنصر دون الحاجة لتعديل HTML.

ما هو العنصر ::before؟

• العنصر ::before يُنشئ عنصرًا وهميًا (زائفًا) يكون الطفل الأول للعنصر الذي يتم تطبيقه عليه.
• يُستخدم لإضافة محتوى أو تصميمات إضافية قبل العنصر الأصلي.
• يعمل فقط إذا تم تحديد الخاصية content، حتى لو كانت القيمة فارغة (content: "").

صيغة استخدام ::before:

selector::before {
    content: "القيمة";
    /* خصائص CSS إضافية */
}

• selector: العنصر الذي سيتم إضافة المحتوى قبله.
• content: خاصية إلزامية لتحديد المحتوى الذي سيتم إضافته.

خصائص شائعة مع ::before:

• content: لإضافة نص، صور، أو أي محتوى آخر.
• display: لتحديد كيفية عرض العنصر الزائف (مثل block، inline، inline-block).
• position: للتحكم في موضع العنصر الزائف.
• color، background، font-size: لتخصيص التصميم.
• width، height: لتحديد حجم العنصر الزائف.
• margin، padding: للتحكم في المسافات.

أمثلة عملية:

إضافة نص قبل العنصر:

.example::before {
    content: "→ ";
    color: green;
    font-weight: bold;
}

في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:

<p class="example">هذا نص مثال</p>

النتيجة:

"→ هذا نص مثال"

إضافة أيقونة قبل الروابط:

a::before {
    content: "🔗 ";
    color: blue;
}

في هذا المثال، عند تطبيق هذه الأنماط على الرابط التالي:

<a href="#">انقر هنا</a>

النتيجة:

"🔗 انقر هنا"

إضافة خط أفقي قبل العنوان:

h5::before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: black;
    margin-bottom: 10px;
}

في هذا المثال، عند تطبيق هذه الأنماط على العنوان التالي:

<h5>عنوان رئيسي</h5>

النتيجة:

سيظهر خط أسود أفقي قبل العنوان.

إضافة صورة قبل العنصر:

.icon::before {
    content: url("icon.png");
    margin-right: 5px;
}

في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:

<span class="icon">معلومات</span>

النتيجة:

سيظهر أيقونة قبل النص "معلومات".

استخدامات متقدمة:

إنشاء تأثيرات تصميمية:

.button::before {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background-color: red;
    transition: width 0.3s ease;
}

.button:hover::before {
    width: 100%;
}

النتيجة:

عند تحويم المؤشر فوق الزر، يظهر خط أحمر يتوسع أفقيًا.

إضافة ترقيم تلقائي:

ol {
    counter-reset: section;
}

li::before {
    counter-increment: section;
    content: counter(section) ". ";
    color: gray;
}

في هذا المثال، عند تطبيق هذه الأنماط على القائمة التالية:

<ol>
    <li>عنصر 1</li>
    <li>عنصر 2</li>
</ol>

النتيجة:

"1. عنصر 1"

"2. عنصر 2"

إضافة علامات اقتباس:

q::before {
    content: open-quote;
    color: blue;
}

في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:

<q>هذا نص بين علامتي اقتباس</q>

النتيجة:

"هذا نص بين علامتي اقتباس"

ملاحظات مهمة:

• العناصر الزائفة فقط: العنصر ::before لا يمكن استخدامه إلا مع العناصر الزائفة.
• الخاصية content إلزامية: يجب تحديد content حتى لو كانت فارغة (content: "").
• لا يدعم HTML: لا يمكن إضافة عناصر HTML داخل ::before، فقط نصوص أو صور أو قيم أخرى.
• التأثير على التخطيط: إضافة محتوى باستخدام ::before يؤثر على تخطيط الصفحة، لذا يجب مراعاة ذلك في التصميم.
• الدعم في المتصفحات: العنصر ::before مدعوم في جميع المتصفحات الحديثة.

الفرق بين ::before و ::after:

::before	::after
يُضاف المحتوى قبل العنصر الأصلي.	يُضاف المحتوى بعد العنصر الأصلي.
يُستخدم لإضافة محتوى في البداية.	يُستخدم لإضافة محتوى في النهاية.

الخلاصـــة

العنصر ::before في CSS هو أداة قوية لإضافة محتوى أو تصميمات قبل العنصر الأصلي دون الحاجة لتعديل HTML. يمكن استخدامه لإضافة نصوص، أيقونات، خطوط، أو حتى تأثيرات حركية، مما يجعله مفيدًا في تحسين تجربة المستخدم وتخصيص التصميم.