after/::before::

after:: و before:: در CSS

مقدمه

این دو انتخابگر از نوع 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: باشد با زدن مثلث کوچک کنار عنصر اصلی می توان آنها به صورت زیر را مشاهده کرد.

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:: آشنا خواهیم شد.

بیشتر بخوانید

32 دیدگاه برای “after:: و before:: در CSS

  1. واقعا سایتت محشره امروز باهاش آشنا شدم مطالب رو ساده ، کامل و حرفه ای توضیح دادی خیلی مخلصم

  2. از امروز من به بازدید کننده های ثبتت پیوستم فقط لطفا حد اقل هر روز یه مطلب مفید بزن واقعا محشری

  3. واقعا سایتت محشره امروز باهاش آشنا شدم مطالب رو ساده ، کامل و حرفه ای توضیح دادی خیلی مخلصم

  4. از امروز من به بازدید کننده های ثبتت پیوستم فقط لطفا حد اقل هر روز یه مطلب مفید بزن واقعا محشری

  5. سلام
    یک سوال فنی
    یک منوی کشویی تصور کنید که طبعا زیر منو داره، من میخوام با کلیک بر روی سر این منو زیر منوها بسته بشه(همونطور که وقتی میزنم باز میشه)
    طبق بررسی هام روی منو های مشابه متوجه شدم از after باید استفاده کنم ولی حتی در همون ها هم متوجه نشدم چطور این اتفاق افتاد.
    سوال اینکه چگونه این رو به منو بفهمونم؟
    پ.ن:من می خوام این اتفاق برای سایت در ابعاد تلفن همراه اتفاق بیفته.

  6. اقا دمت گرم خدایی من هرچی میخوندم مفهموم و کاربر این دو تا رو دقیق متوجه نمیشدم. اما با مثال شما فهمیدمش. دمت گرم
    اگر کانال تلگرام هم برای اموزش هات داری معرفی کنی ممنون میشم

  7. سلام فیلمی یا مطلبی در رابظه با منو کشویی ندارین(drop down menu)
    تو کدوم یک از دوره هاتون این مطلبو آموزش میدید؟
    ممنون میشم راهنماییم کنید
    چون من تقریبا همه چیو یاد گرفتم این لامصب رو نمیدونم چرا نمی فهمم.

  8. سلام استاد، وقتتون بخیر….. :)
    ….. استاد لینکی که یک جای پست گذاشتین و اصرار کردید حتماا ببینیم باز نمیشه داخل console اش خطا داره…
    “حتما به این سایت سر بزنید. one-div.com”
    منظورم لینک فوق هست…. موفق ترین باشین… :)

  9. با عرض سلام و خسته نباشید
    من یه سوال داشتم
    من برای سایتم یه منو طراحی کردم که کنار منوهای بازشوی اون، یه فلش با :after قرار دادم.
    چطور میتونم با jquery بهش بگم که اگه روی گزینه‌ی منوی بازشو کلیک شد، اون فلش (:after) کنارش رنگش عوض بشه یا بچرخه یا ….؟
    لطفا طرز استفاده از :before و :after رو در jquery توضیح بفرمایید
    ممنون میشم

  10. سلام
    این اموزش که عالی بود ولی
    کاشکی میشد تو css حلقه شرطی مینوشت
    یا اصن شرط گذاری دلخواه میکرد . مثلا:
    .r:target{
    {;t{display:none;opaity:0.

    }

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *