البرمجة

استخدام العنصرين الزائفين ::before و ::after في CSS

اخر تحديث 10/06/2025
18 تمت قراءة 5 دقيقة
جدول المحتوى

كل ما تريد معرفته عن العنصرين الزائفين ::after و ::before في CSS

تُعد تقنيات تصميم صفحات الويب الحديثة من أكثر الأمور أهميةً وثراءً في مجال تطوير الويب، وتعتبر لغة CSS (Cascading Style Sheets) من أهم الركائز التي يُعتمد عليها في تنسيق وتصميم مظهر المواقع بشكل جذاب واحترافي. من بين الأدوات القوية التي توفرها CSS، يأتي دور العنصرين الزائفين (Pseudo-elements) وخاصةً ::before و ::after، اللذين يُستخدمان بشكل واسع لإضافة محتوى وتنسيقات دون الحاجة إلى تعديل الهيكل الأساسي للصفحة أو إضافة عناصر HTML إضافية.

تعريف العنصرين الزائفين ::before و ::after

العنصران الزائفان ::before و ::after هما نوعان من العناصر الافتراضية التي تُستخدم لإدخال محتوى إضافي داخل عنصر HTML معين، وذلك باستخدام CSS فقط. وهما ليسا عناصر حقيقية موجودة في شجرة DOM، بل يتم إنشاؤهما تلقائيًا وتستخدمهما المتصفحات لعرض محتوى إضافي مرتبط بالعنصر الذي يُطبَّق عليهما.

مواضيع ذات صلة

  • ::before: يقوم بإدراج محتوى افتراضي قبل المحتوى الأصلي للعنصر.

  • ::after: يقوم بإدراج محتوى افتراضي بعد المحتوى الأصلي للعنصر.

هذان العنصران يسمحان للمطورين بإضافة نصوص، صور، أو رموز دون الحاجة إلى تغيير شيفرة HTML، مما يعزز مرونة التصميم ويقلل من تعقيد الشفرة.

الاستخدامات الشائعة للعناصر الزائفة ::before و ::after

  1. إضافة أيقونات ورموز

    غالبًا ما يُستخدم ::before أو ::after لإضافة أيقونات صغيرة بجانب النصوص أو العناوين، مثل إضافة سهم صغير، أو رمز نجمة، دون الحاجة لإضافة صورة أو عنصر HTML جديد.

  2. تنسيق وتأطير النصوص

    يمكن استخدامهما لإضافة تأثيرات مثل الشرطات أو النقاط أو حتى تأثيرات إبداعية كإضافة خلفية نصية أو خطوط تحت النص.

  3. إنشاء تأثيرات بصرية متقدمة

    من خلال استخدام خواص CSS مثل content, position, z-index, و transform يمكن إنشاء تأثيرات ديناميكية وجذابة، مثل الظلال، الإطارات، أو حتى أشكال هندسية بسيطة.

  4. تحسين تجربة المستخدم عبر العناصر التفاعلية

    مثل إضافة تأثيرات هبوط أو ظهور عند التمرير على الأزرار أو الروابط.

الصيغة الأساسية لاستخدام ::before و ::after

لكي يعمل العنصر الزائف يجب أن تحتوي قاعدة CSS على خاصية content، لأن بدونها لن يظهر أي محتوى، فهذه الخاصية هي التي تحدد ما يتم إدراجه عبر العنصر الزائف.

css
.selector::before {
    content: "نص إضافي";
    /* أنماط أخرى */
}

.selector::after {
    content: "";
    /* أنماط أخرى */
}

في المثال أعلاه، العنصر الذي يحمل الفئة .selector سيحصل على نص إضافي قبل محتواه الأصلي بفضل ::before. أما ::after فتم تعيين content له كسلسلة فارغة، مما يعني أنه يمكن استخدامه لأغراض تنسيقية بحتة كإنشاء تأثيرات أو أشكال.

أهم الخواص التي تُستخدم مع ::before و ::after

  • content:

    الخاصية الأساسية التي تحدد ما سيُضاف. يمكن أن تكون نصًا، رمزًا (باستخدام Unicode)، صورة، أو سلسلة فارغة.

  • position:

    تستخدم غالبًا لتحديد موقع العنصر الزائف بالنسبة للعنصر الأساسي.

    مثل: relative, absolute, fixed.

  • display:

    يتم ضبطه كثيرًا على block, inline, inline-block أو flex حسب الحاجة.

  • width و height:

    لتحديد أبعاد العنصر الزائف.

  • background:

    لوضع خلفيات أو تأثيرات لونية.

  • z-index:

    لتحديد ترتيب ظهور العنصر الزائف فوق أو تحت عناصر أخرى.

  • transform:

    لإجراء تحولات مثل التدوير أو التكبير.

  • opacity:

    لجعل العنصر شفافًا أو شبه شفاف.

أمثلة عملية على استخدام ::before و ::after

مثال 1: إضافة رمز سهم قبل الروابط

css
a::before {
    content: "→ ";
    color: #555;
}

في هذا المثال، سيتم عرض سهم صغير قبل كل عنصر ، مما يعزز من قابلية التمييز بين الروابط والنصوص العادية.

مثال 2: إضافة خط أسفل العناوين

css
h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: #007BFF;
    margin-top: 5px;
}

يضيف هذا الكود خطًا أزرق صغيرًا أسفل جميع العناوين من نوع

، مما يعزز التصميم ويضيف لمسة جمالية بسيطة.

مثال 3: إنشاء إطار حول محتوى العنصر باستخدام ::before و ::after

css
.box {
    position: relative;
    padding: 20px;
    background-color: #f9f9f9;
}

.box::before,
.box::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333;
    left: 0;
}

.box::before {
    top: 0;
}

.box::after {
    bottom: 0;
}

في هذا المثال، يتم استخدام العنصرين الزائفين لإنشاء خطين في أعلى وأسفل العنصر .box، مما يعطي تأثير إطار أنيق بدون الحاجة إلى عناصر HTML إضافية.

الفرق بين العناصر الزائفة والعناصر المزيفة (Pseudo-classes)

غالبًا ما يختلط الأمر بين العناصر الزائفة (Pseudo-elements) مثل ::before و ::after، والفئات المزيفة (Pseudo-classes) مثل :hover و :focus. الفئة المزيفة تشير إلى حالة معينة لعنصر موجود (مثل مرور الماوس عليه)، بينما العنصر الزائف يمثل جزءًا جديدًا يتم إنشاؤه داخل العنصر.

استخدامات متقدمة للعنصرين الزائفين

  1. تصميم الأزرار التفاعلية

    يمكن استخدام ::before و ::after لإضافة تأثيرات ظل، تحولات لونية، أو أشكال هندسية تزيد من جاذبية الأزرار.

  2. إنشاء مخططات بيانية بسيطة

    مثل إضافة نقاط أو أشرطة صغيرة بجانب النصوص لتوضيح البيانات.

  3. تصميم القوائم بشكل إبداعي

    مثل استبدال نقاط القائمة التقليدية بأيقونات مخصصة أو صور.

  4. العمل على تأثيرات النصوص

    إضافة تأثيرات ظل، تكرار النصوص، أو خطوط تحتها باستخدام محتوى إضافي.

نقاط يجب الانتباه إليها عند استخدام ::before و ::after

  • يجب أن يكون العنصر الأساسي الذي تطبق عليه هذه العناصر الزائفة قادرًا على استضافة المحتوى، لذا في بعض الأحيان يجب ضبط position إلى relative لتمكين التحكم الصحيح في مواقع العناصر الزائفة.

  • العنصر الزائف لا يمكنه أن يحمل محتوى تفاعلي (مثل أزرار أو روابط قابلة للنقر) بشكل مستقل، إذ يبقى جزءًا من العنصر الأساسي، ويعتمد على طريقة التصميم والتفاعل معه.

  • لا يمكن استخدام العنصر الزائف مع بعض العناصر مثل أو بشكل مباشر، حيث لا تدعم هذه العناصر إدخال محتوى إضافي عبر CSS.

  • ضرورة تعيين خاصية content لتجنب عدم ظهور العناصر الزائفة، لأن غيابها يؤدي إلى تجاهل المتصفح لهذه القواعد.

الأداء وتأثير استخدام ::before و ::after

من الناحية التقنية، لا تؤثر العناصر الزائفة بشكل ملحوظ على أداء الموقع، لأنها لا تضيف عناصر حقيقية إلى DOM بل تتم معالجتها في طبقة العرض. لذلك، هي طريقة فعالة جدًا لتحسين التصميم دون زيادة تحميل الصفحة أو تعقيد الشفرة.

لكن يجب الحذر من الاستخدام المفرط أو المعقد لهذه العناصر، خاصةً مع تأثيرات التحول والتحريك التي قد تؤثر على تجربة المستخدم في الأجهزة ذات الموارد المحدودة.

الجدول التالي يوضح مقارنة مختصرة بين ::before و ::after

الخاصية ::before ::after
الموضع قبل محتوى العنصر بعد محتوى العنصر
المحتوى يُستخدم لإضافة نص أو رمز أو شكل قبل يُستخدم لإضافة نص أو رمز أو شكل بعد
الاستخدام الشائع إضافة أيقونات قبل النص أو تأثيرات إضافة خطوط، تأثيرات أو أشكال خلفية
يعتمد على خاصية content خاصية content
تأثيرات متكررة يمكن استخدامه مع تأثيرات CSS المختلفة يمكن استخدامه مع تأثيرات CSS المختلفة

متصفح الدعم والتوافقية

جميع المتصفحات الحديثة تدعم العنصرين الزائفين ::before و ::after، بما في ذلك:

  • Google Chrome

  • Mozilla Firefox

  • Microsoft Edge

  • Safari

  • Opera

لكن يجدر الانتباه إلى أن بعض المتصفحات القديمة جدًا كانت تدعم النسخة القديمة من العنصر الزائف باستخدام صيغة واحدة (:before و :after)، بينما النسخة الحديثة تستخدم (::before و ::after) مع وجود دعم تراكمي للنسخ القديمة.

خلاصة

العنصران الزائفان ::before و ::after هما من أكثر أدوات CSS قوة ومرونة في تصميم واجهات الويب، يسمحان بإضافة محتوى وتنسيقات إضافية دون تغيير الهيكل الأساسي للصفحة، مما يوفر وقت المطور ويقلل من تعقيد الكود. تتيح هذه العناصر إنشاء تأثيرات بصرية متقدمة، تحسين تجربة المستخدم، وتنفيذ تصاميم مميزة تتسم بالاحترافية.

بمعرفة كيفية استخدام ::before و ::after بشكل صحيح، يمكن رفع جودة التصميم بشكل كبير، والاستفادة من إمكانيات CSS في بناء صفحات ويب متناسقة وجذابة مع تقليل حجم وأعباء الكود. يظل تعلم وتوظيف هذه الأدوات من المهارات الأساسية لأي مطور ويب يطمح إلى التميز والابتكار في مجاله.

المصادر والمراجع

اخر تحديث 10/06/2025
18 تمت قراءة 5 دقيقة