شرح مفصل لـ CSS: pseudo-elements مثل before و after

ما هي الـ pseudo-elements في CSS؟

تعتبر pseudo-elements في CSS أدوات قوية تُستخدم لتطبيق أنماط على أجزاء معينة من العناصر في الصفحة دون الحاجة إلى تعديل الشيفرة الأساسية للـ HTML. تُستخدم هذه العناصر الوهمية لإضافة محتوى أو أنماط إضافية للعناصر الحالية. يُعد “::before” و “::after” من أشهر الـ pseudo-elements استخدامًا، حيث يتيحان لك إدراج محتوى قبل أو بعد محتوى العنصر الأصلي.

تساعد هذه العناصر المطورين في تحسين وتجميل التصميمات بسهولة، وتُعتبر بديلاً ممتازًا لإضافة عناصر HTML إضافية فقط لأغراض التنسيق. يمكن استخدام الـ pseudo-elements لتطبيق تأثيرات فريدة ومرنة مثل الأشكال الزخرفية، الرموز، والعديد من التطبيقات الأخرى.

كيفية استخدام ::before و ::after في CSS

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

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

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

في المثال التالي، سنقوم بإضافة رمز نجمة قبل النص باستخدام “::before”.

.starred-item::before {
            content: \"★\";
            color: gold;
            margin-right: 5px;
        }
    

    <p class=\"starred-item\">هذا عنصر بنجمة قبل النص.

أما في هذا المثال، سنضيف نصًا تذييليًا بعد المحتوى باستخدام “::after”.

.note::after {
            content: \" - ملاحظة\";
            color: grey;
            font-style: italic;
        }
    

    <p class=\"note\">هذا نص يحتوي على ملاحظة بعده.

تطبيقات عملية لـ ::before و ::after

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

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