مقدمه
این دو انتخابگر از نوع pseudo element می باشند که در نگاه اول و در تعریف اولیه می توان گفت این امکان را به ما می دهند تا از طریق CSS بتوانیم محتوا وارد صفحه کنیم بدون اینکه نیازی به انجام تغییری در HTML باشد.
در دنیای مرورگرها امروزه به جایی رسیده ایم که می توان از این دو عنصر در صورت نیاز استفاده کرد. توجه داشته باشید که در مرورگرهای عزیز IE هم, از IE8 به بالا این دو عنصر پشتیبانی می شوند. برای اطلاعات بیشتر در مورد پشتیبانی مرورگرها به این سایت سر بزنید.
اولین مورد استفاده: وارد کردن محتوی از طریق CSS
فرض کنید عنصری با کلاس element در HTML وجود دارد. کاربرد این عناصر در ساده ترین حالت به طریق زیر است.
.class::before
{
content: 'محتوری مورد نظر';
}
.class::after
{
content: 'محتوری مورد نظر';
}
See the Pen zGYLgm by Mojtaba Seyedi (@seyedi) on CodePen.
توجه کنید که در مثال بالا فاصله ای بین borderو عناصر after:: و before:: بوجود آمده, بله آن فاصله padding مربوط به عنصر اصلی می باشد, پس این به این معناست که مکان این دو عنصر در حالت پیشفرض دقیقا کنار قسمت محتوی یک عنصر می باشد. برای دیدن این دو عنصر در DOM می توانید از ابزار Developer گوگل کروم استفاده کنید. اگر عنصری دارای after:: یا before: باشد با زدن مثلث کوچک کنار عنصر اصلی می توان آنها به صورت زیر را مشاهده کرد.
در مثال زیر قصد داریم کلاسی برای ساخت عبارت نقل قول بسازیم.
See the Pen PqoLRw by Mojtaba Seyedi (@seyedi) on CodePen.
کافی است که از این به بعد به عنصری که حاوی یک عبارت نقل قول است کلاس quote را بدهیم تا علامت های نقل قول ظاهر شوند بدون اینکه نیاز به انجام کاری در HTML باشد.
توجه داشته باشین به روش زیر حتی این امکان وجود دارد که در این عناصر تصویر به جای متن قرار داد.
p::before
{
content: url(image.jpg);
}
کاربرد در رسم شکل
تقریبا حدود سه سال پیش یک کل کل در دنیای CSS کارها بوجود آمد. موضوع ساخت اشکال مختلف با تنها استفاده از یک عنصر در HTML بود. تکنیک هایی که برای این کار استفاده می شد شامل gradient, box-shadow و همین after و before بود. در اینجا ما به ساخت یک قلب با استفاده از یک عنصر می پردازیم.
See the Pen Heart by Mojtaba Seyedi (@seyedi) on CodePen.
حتما به این سایت سر بزنید. one-div.com
: یا ::؟
همه مرورگرها هر دو روش نوشتن را پشتیبانی می کنند اما IE8 فقط : را پشتیبانی می کند پس بهترین روش برای نوشتن در حال حاضر به قرار زیر است.
div:after
{
content: 'Hoy!';
}
توجه داشته باشید که استفاده از :: استاندارد امروزه می باشد.
توجه: این عناصر واقعی نیستند پس از قرار دادن محتوایی که برایتان اهمیت دارد و ضروری است در این عناصر خودداری کنید. به عنوان مثال محتوایی که می خواهید موتورهای جستجو ببینند در این عناصر قرار ندهید.
در مطالب بعدی سایت با کاربردهای بیشتر after:: و before:: آشنا خواهیم شد.
احسنت مجتبی جان بهترین مقاله فارسی در زمینه after before شده!
یکم مثال ها رو بیشتر کن
احسنت مجتبی جان بهترین مقاله فارسی در زمینه after before شده!
یکم مثال ها رو بیشتر کن
شیری که از مادرت خوردی حلالت
دمت گرم
خیلی چاکرتم کارمو راه انداختی بدجوووور
مرسی
بزرگواری عزیز. موفق باشی :)
شیری که از مادرت خوردی حلالت
دمت گرم
خیلی چاکرتم کارمو راه انداختی بدجوووور
مرسی
بزرگواری عزیز. موفق باشی :)
واقعا سایتت محشره امروز باهاش آشنا شدم مطالب رو ساده ، کامل و حرفه ای توضیح دادی خیلی مخلصم
ممنون, بزرگوارید :)
از امروز من به بازدید کننده های ثبتت پیوستم فقط لطفا حد اقل هر روز یه مطلب مفید بزن واقعا محشری
واقعا سایتت محشره امروز باهاش آشنا شدم مطالب رو ساده ، کامل و حرفه ای توضیح دادی خیلی مخلصم
ممنون, بزرگوارید :)
از امروز من به بازدید کننده های ثبتت پیوستم فقط لطفا حد اقل هر روز یه مطلب مفید بزن واقعا محشری
مرسی خیلی ممنون
لینک پروژه ای که با Before, After زدم:
تمام عناصر ثانیه، دقیقه و ساعت Before, After هستند.
Live view: http://codepen.io/ehsanamir…
Editor view: http://codepen.io/ehsanamir…
خیلی عالی. ممنون. به امید اینکه کارای بیشتری ازت ببینیم.
Good:)
چه کار زیبایی
من وب سایتی با همین نام رو تو انگلیسی دنبال میکردم
خوشحالم اینکارو انجام دادید
سلام.
چطوری میتونم به input با type=”button” مقدار before رو اعمال کنم؟
عناصری مثل input این امکان براشون نیست.
کلا عناصر Replaced این شبه عناصر رو نمی پذیرند.
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
سلام
یک سوال فنی
یک منوی کشویی تصور کنید که طبعا زیر منو داره، من میخوام با کلیک بر روی سر این منو زیر منوها بسته بشه(همونطور که وقتی میزنم باز میشه)
طبق بررسی هام روی منو های مشابه متوجه شدم از after باید استفاده کنم ولی حتی در همون ها هم متوجه نشدم چطور این اتفاق افتاد.
سوال اینکه چگونه این رو به منو بفهمونم؟
پ.ن:من می خوام این اتفاق برای سایت در ابعاد تلفن همراه اتفاق بیفته.
اقا دمت گرم خدایی من هرچی میخوندم مفهموم و کاربر این دو تا رو دقیق متوجه نمیشدم. اما با مثال شما فهمیدمش. دمت گرم
اگر کانال تلگرام هم برای اموزش هات داری معرفی کنی ممنون میشم
سلام فیلمی یا مطلبی در رابظه با منو کشویی ندارین(drop down menu)
تو کدوم یک از دوره هاتون این مطلبو آموزش میدید؟
ممنون میشم راهنماییم کنید
چون من تقریبا همه چیو یاد گرفتم این لامصب رو نمیدونم چرا نمی فهمم.
سلام، ساخت این، مستلزم اینه که شما یک سری از مطالب css رو درک خوبی ازش داشته باشید. مثلا positionها و …
دوره صفحه آرایی این مطالب رو آموزش میده
دمت گرم خیلی استفاده کردیم ممنون
سلام استاد، وقتتون بخیر….. :)
….. استاد لینکی که یک جای پست گذاشتین و اصرار کردید حتماا ببینیم باز نمیشه داخل console اش خطا داره…
“حتما به این سایت سر بزنید. one-div.com”
منظورم لینک فوق هست…. موفق ترین باشین… :)
سلام خسته جان، وقت شما هم بخیر :)
من خیلی هم حالا اصرار نداشتم ولی حالا چون شما اصرار میکنید می تونید از لینک زیر ببینیدش :)
https://web.archive.org/web/20160312044842/http://one-div.com
این چون خیلی قدیمی هستش، طرف دیگه دامنه و سایتش رو نگهداری نکرده.
با عرض سلام و خسته نباشید
من یه سوال داشتم
من برای سایتم یه منو طراحی کردم که کنار منوهای بازشوی اون، یه فلش با :after قرار دادم.
چطور میتونم با jquery بهش بگم که اگه روی گزینه‌ی منوی بازشو کلیک شد، اون فلش (:after) کنارش رنگش عوض بشه یا بچرخه یا ….؟
لطفا طرز استفاده از :before و :after رو در jquery توضیح بفرمایید
ممنون میشم
تنها سایتی که برای مشکلات css بهش سر میزنم همینه
انصافا دمت گرم
عالی بود
عالی مثال هارو بیشتر کن لطفا
سلام
این اموزش که عالی بود ولی
کاشکی میشد تو css حلقه شرطی مینوشت
یا اصن شرط گذاری دلخواه میکرد . مثلا:
.r:target{
{;t{display:none;opaity:0.
}
البته درست نوشته نشد :/
چون سایت ltr نیست