سلکتور های (css) before & after

سالام

خوب خیلیا که می‌دونن این سلکتورها کارشون چیه ولی من دارم برای اونایی می‌نویسم که نمیدونن اینا کارشون چیه!!

خوب حالا کارشون چیه مگه؟

خیلی ساده و جالبن، همونطور که از اسمشون معلومه مربوطن به قبل و بعد (محتوای) اون تگی که شما روش اینها رو پیاده میکنید و کاری که دقیقا میکنن اینه که شما میتونید یه متن مثلا به اونا بدین و قبل یا بعد متنایی که این کلاس رو دارن گذاشته شه یا حتی مثلا یه ایکون ?

خوب مثل اینکه جالب شد بزارین یه مثال بزنیم:

شما فرض کن یه تگ داری به این صورت:

<p class="site">ویرگول</p>

خوب مثلما خروجش اینه:

ویرگول

حالا این css رو هم بهش اضافه میکنیم:

.test{
    color:black;
}

.test::before{
    content: 'وبسایت';
}

خوب اتفاقی که اینجا میفته اینه که هرجا اون کلاس test رو بزارید قبل از محتواش یه - وبسایت - اضافه می‌کنه و اینو نشون میده:

وبسایتویرگول

البته مشکل سرهم نوشتن رو میشه با یه دونه 'space' حل کرد یعنی:

.test::before{
    content: 'وبسایت ';
}

سلکتور after هم دقیقا همین کارو انجام میده منتها بعد از محتوای تگتون گذاشته می‌شه مثلا اگه داشته باشیم:

.test::after{
    content: ' بلاگ';
}

این خروجی رو بهمون میده:

ویرگول بلاگ

حالا اگه خواستید یه icon بزارین باید از طریق unicode اونو اضافه کنید یعنی اینجوری:

.test::before{
    content: '\f10e';
    font-family: "Font-Awesome";
    font-weight: 900;
}

البته شما میتونید از فونت ایکون های دیگه هم استفاده کنید استایل هم میتونین بدین که خیلی چیز جالب تری هم میشه مثل این نمونه:

اومدیم از طریق سلکتور before و after بهشون بکگراند ویرگول دادیم که چیز جالبی شده در کل اگه دوست داشتید میتونید ازش استفاده کنید کدش آزاده (من خودمم از یه جای دیگه کپیش کردم ?)

درضمن یه نکته مهم‌: حتما سلکتورتون باید محتوا (content) داشته باشه در غیر این صورت اجرا نمیشه!

اگرم میخواین سلکتورتون فقط استایل باشه و متن یا ایکون نمیخواین بزارین بتاید اینطوری بنویسید:

    content: '';

خوب اینم از این من برم بگیرم بخابم شبتون خوش

البته نصفه شبتون خوش