مقدمة لخاصيتي 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");  
}  

See the Pen Using a psuedo element to insert an image on a page by CSS-Tricks Team (@css-tricks) on CodePen.

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

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

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

‏‎Bixelio‎‏