cssblog.ir logo
S

before-and-after-pseudo-selectors

شبه‌ انتخابگر after و before

شبه انتخاب‌گر before و after به ما کمک می کنند تا از طریق CSS به صفحه محتوا تزریق کنیم

::after و ::before در CSS شبه عناصری (pseudo element) هستند که با استفاده از آنها می توانیم با استفاده از CSS به قبل و بعد از محتوای عناصر محتوا تزریق کنیم (بدون استفاده از HTML). وقتی از after یا before استفاده می کنیم نتیجه را در صفحه مرورگر و inspector آن خواهیم دید اما طبیعتا این دو تاثیری در  HTML صفحه تحویل گرفته شده از سرور نخواهند داشت. 

before و after کجا قرار می گیرند؟

فرض کنید که ما یک عنصر h1 در صفحه داریم که دارای محتوای CSSBLOG.IR است. محل قرار گیری before و after به این شکل خواهد بود:

css before and after

چگونه از آنها استفاده کنیم؟

نحوه انجام کار بسیار ساده است. فقط باید برای عنصری که قصد تزریق before یا after را دارید، انتخاب نموده و سپس :before یا :after را بیاورید. پس از نوشتن selector مورد نظر حتما باید content آن را مشخص کنید. لیست مقادیری که می توانیم به content بدهیم:‌

مقدار توضیح مثال
رشته هر رشته متنی ای بدون HTML content: "Salam"
تصویر مسیر تصویر را داخل url قرار می دهیم. تصویر با ابعاد اصلی آن تزریق می شود و امکان تغییر سایز نخواهد داشت content: url("/path/to/image.jpg")
هیچی (خالی) رشته خالی، مناسب برای مواقعی که قصد نداریم تا مقدار خاصی را بدهیم content: ""
شمارنده برای مواقعی که قصد ایجاد لیست را داریم و می خواهیم شمارنده عناصر را در کنار موارد قرار دهیم content: counter(li)


چرا before و after اعمال نمی شوند؟

گاهی اوقات ممکن است در حال استفاده از این دو شبه عنصر باشید و نتیجه مورد انتظار خود را مشاهده نکنید.

۱- نکته بسیار مهم و قابل توجه این است که before و after را روی عناصر self-closing یا همان تکی مانند (img و input) نمی توان استفاده نمود. 

۲- حتما باید در CSS مشخصه content را داده باشید وگرنه مروگر واکنشی به css شما نشان نخواهد داد.

تفاوت : و :: 

تمام مرورگرهایی که از :: (۲ کولون) پشتیبانی می کنند از حالت : (تک کولون) هم پشتبیانی می کنند. معمولا IE8 مشکلاتی در پشتیبانی از :: را دارد و  : را به خوبی پشتبیانی می کند. پس اگر پشتیبانی کامل مرورگرها برای شما مهم است بهتر است از ‌: استفاده کنید.

۲ کولون (::) قالب جدید تری است و به این دلیل ایجاد شد که بین شبه محتوا و شبه سلکتورها (pseudo-class) تفاوت ایجاد کند.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند