مقدمة لخاصيتي before و after



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

ما عملها؟
بإختصار عمل :after و :before هو إضافة عنصر زائد بعد أو قبل عنصر المحدد،
ولكن هذان عنصران غير موجودان في الملف، هما مرئيان في واجهة و لكن لن تجدهما في كود مصدري للصفحة، 

الصيغة

element::before {
 // CSS CODES GOES HERE
}
element::after {
 // CSS CODES GOES HERE
}

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

مثال

<p>Bixelio</p>
p:before {
 content: 'With ';
 color: #3BC0CE;
 font-weight: bold;
}
p:after {
 content: ' coding is fun :)';
 color: #3BC0CE;
 font-weight: bold;
}



كما تلاحظون في هذا المثال قمنا بإنشاء وسم <p>…</p> و كتبنا به كلمة Bixelio، ثم بعدها أستخدمنا ::before على عنصر <p>…</p> و عبر content كتبنا داخل ::before كلمة With، و لأن ::before تضيف عنصر جديد قبل العنصر المحدد ظهرت نتيجة بهذا الشكل،و نفس شيء مع ::after بعد إضافتها تضيف عنصر جديد بعد العنصر المحدد،

لتوضيح طريقة عمل خاصيتين بشكل أفصل، 


كما يمكن عبر خاصية content إضافة صور أيضا بشكل تالي، 

element:after {  
content: url("image/example.png");  
}  





ملاحظة: يفضل إستخدام نقطتين ":" بدل "::" لدعم متصفحات القديمة مثل IE8،

دعم المتصفحات


الخاصية Chrome Firefox Safari Opera IE Android IOS
::before +31 35+ +7.1 7+2 +8 نعم نعم
::after

هناك تعليقان (2):

بكسليو - لمحترفي تصميم و تطوير الويب © 2014

يتم التشغيل بواسطة Blogger.