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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

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

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

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

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

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

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

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