ستوجهك هذه الكتابة حول تغيير المحتوى في CSS.
كيفية تغيير المحتوى في CSS؟
لتغيير المحتوى في CSS ، سنستخدم الطرق التالية:
فلنستعرض كل طريقة واحدة تلو الأخرى!
الطريقة الأولى: استخدم :: after Selector مع خاصية المحتوى لتغيير المحتوى في CSS
ال ' ::بعد، بعدما 'المحدد يضع المحتوى المحدد بعد عنصر HTML باستخدام CSS' المحتوى ' منشأه. تساعد هذه العملية في إضافة المحتوى إلى العنصر المحدد. بالإضافة إلى ذلك ، فإن ' عرض 'لإخفاء المحتوى الموجود.
دعنا نلقي نظرة على المثال أدناه لفهم كيفية تغيير المحتوى في CSS باستخدام :: after selector.
مثال
ها هي صفحة HTML الخاصة بنا مع النص ' صباح الخير!!! '. دعنا نستبدل المحتوى المضاف:
حاليًا ، أضفنا ' 'علامة بنص في قسم النص الأساسي لملف HTML الخاص بنا:
< ص > صباح الخير!!! < / ص >في ملف CSS الخاص بنا ، سنستخدم :: after selector كـ ' الجسم :: بعد 'واستخدم' المحتوى 'الملكية بالقيمة' مساء الخير 'داخل تعريفه. نتيجة لذلك ، سيضع محدد CSS النص مباشرةً بعد النص المكتوب. أخيرًا ، قم بإخفاء النص الموجود باستخدام ' عرض 'وتعيين قيمتها على' لا أحد ':
< نمط >الجسم :: بعد {
المحتوى : 'مساء الخير' ؛
}
ص {
عرض لا شيء؛
}
< / نمط >
الآن ، احفظ ملف HTML الخاص بك وافتحه ببساطة في المتصفح أو استخدمه “خادم مباشر لنفس الغرض:
كما ترى ، تم تغيير المحتوى بنجاح باستخدام :: after CSS selector:
الطريقة 2: استخدم :: before Selector مع خاصية المحتوى لتغيير المحتوى في CSS
في CSS ، ' ::قبل 'المحدد لجعل المحتوى يظهر مباشرة قبل المحتوى الحالي للعنصر. يمكن استخدامه مع ' المحتوى 'لإضافة محتوى جديد إلى العنصر المحدد.
مثال
حدد :: قبل المحدد مباشرة بعد النص كـ ' الجسم :: من قبل '. سيؤدي هذا إلى وضع المحتوى الجديد قبل المحتوى الحالي. لاحظ أن جميع الخصائص الأخرى تظل كما هي في المثال السابق:
< نمط >الجسم :: من قبل {
المحتوى : 'مساء الخير' ؛
}
ص {
عرض لا شيء؛
}
< / نمط >
انتاج |
لقد أوضحنا طرقًا مختلفة لتغيير المحتوى في CSS.
استنتاج
لتغيير المحتوى ، ' ::بعد، بعدما ' و ' ::قبل يتم استخدام محددات CSS مع ' المحتوى ' منشأه. في الطريقة الأولى ، تتم إضافة النص المحدد بعد العنصر المحدد ، بينما يعمل محدد CSS الثاني بالعكس. وعلاوة على ذلك، فإن ' عرض 'لإخفاء المحتوى الموجود لعنصر ما. هذه هي الطريقة التي يتم بها تغيير المحتوى بالكامل في CSS. لقد قمنا بتغطية طريقتين لتغيير المحتوى في CSS.