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

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

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





إليك كيفية استخدام العناصر الزائفة في CSS.



كيف تجد اسم أغنية في مقطع فيديو

العناصر الزائفة الشائعة

هناك قائمة واسعة من العناصر الزائفة المتاحة لجعل حياة مطور الويب أسهل. تتضمن بعض هذه العناصر الزائفة ما يلي:





  • قبل
  • بعد، بعدما
  • الخلفية
  • السطر الأول
  • الرسالة الأولى

في حالات محددة ، ستثبت بعض العناصر الزائفة أنها أكثر ملاءمة من غيرها ، ولكن الشيء الوحيد الذي يظل ثابتًا هو الهيكل العام لاستخدام أي عنصر زائف.

مثال على بنية العناصر الزائفة


selector::pseudo-element{
/* css code */
}

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



العناصر الزائفة قبل وبعد هي الأكثر شيوعًا في القائمة ، وبالنظر إلى وجود العديد من الطرق العملية لاستخدامها - ليس من الصعب معرفة السبب.

استخدام عنصر Before Pseudo في CSS

على الرغم من أنه ليس مستحيلًا ، إلا أنه من الصعب تراكب الصور بنص مقروء في CSS. هذا في الغالب لأن الصورة والنص سيحتلان نفس المكان على صفحة الويب.



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

المشكلة الوحيدة هي أنه نظرًا لأن الصورة والنص يشغلان نفس الموضع ، سيصبح النص أيضًا شفافًا إلى حد ما.



إحدى الطرق القليلة الفعالة لحل هذه المشكلة هي استخدام العنصر الزائف قبل.

استخدام مثال العنصر الزائف قبل


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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





This is the result of using the before pseudo-element
to overlay and image with readable text.


سيؤدي ذلك إلى وضع تراكب على الصورة وعرض نص واضح في الأعلى ، كما هو موضح في الصورة أدناه:

استخدام بعد العنصر الزائف في CSS

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

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

استخدام مثال العنصر الزائف بعد


.required::after{
content: '*';
color: red;
}

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

كيفية إزالة البرامج غير المرغوب فيها من Windows 10

خاصية المحتوى

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

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

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

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

يشارك يشارك سقسقة بريد الالكتروني 10 أمثلة بسيطة لرموز CSS يمكنك تعلمها في 10 دقائق

هل تحتاج إلى مساعدة في CSS؟ جرب أمثلة كود CSS الأساسية هذه لتبدأ ، ثم قم بتطبيقها على صفحات الويب الخاصة بك.

اقرأ التالي مواضيع ذات صلة
  • برمجة
  • تصميم المواقع
  • CSS
نبذة عن الكاتب قاديشا كين(21 مقالة منشورة)

قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مواد يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).

المزيد من Kadeisha Kean

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك