مرجع CSS فارسی
PSEUDO-CLASS
::after
after::
after:: یک شبه عنصر محتوایی است که توسط کامپایلر مرورگر تولید می شود. همچنین آخرین فرزند انتزاعی هر المان است که قابلیت استایل دهی دارد. برای هر المان وجود دارد و آخرین فرزند آن محسوب می شود.
محتوایی که با after:: ایجاد می شود، بعد از همه ی محتوا های دیگر داخل یک المان قرار خواهد گرفت. و به طور پیش فرض به صورت ” inline ” نمایش داده می شود . همچنین مقداری که به عنوان محتوا دریافت می کند، داخل خصوصیت ” Content ” مشخص می شود.
به عنوان مثال ، فرض کنید می خواهیم به تمام المان های ” لینک ” که به سایت های دیگر اشاره میکنند ،یک آیکون اضافه کنیم. در واقع بهترین کار این است که لینک هایی که قرار است کاربر را به سایت های دیگر ارجاع دهند ، دارای چنین آیکونی باشند. چنین آیکونی می تواند قبل یا بعد از ” لینک ” قرار بگیرد . در چنین حالتی پیشنهاد این است که بعد از المان ( به after:: ) مقدار دهی شوند. به هر صورت کاری که در صدد انجام آن هستیم این است که از after:: برای اضافه کردن آیکون 
بعداز محتوای ” لینک ” ها استفاده کنیم.
Visit <a href="https://iqstudio.ir" class="external">iQStudio</a>با تکه کد زیر آیکون را به ” لینک ” اضافه کردیم. آیکون به صورت ” inline ” بعد از محتوای ” لینک ” قرار خواهد گرفت.
.external::after {
content: url(external-link.png);
padding-left: 5px; /* create some space between the image and the content before it */
}
آیکون(تصویر png) با استفاده از خصوصیت ” Content ” اضافه شده است. تصاویری که توسط شبه عناصر ها( عناصر انتزاعی pseudo-elements ها مثل after::) اضافه می شوند قابل تغییر اندازه نیستند. قبل از افزودن تصویر به یک شبه عنصر مانند after:: می بایست آن را به اندازه ی دلخواه تغییر دهید.
نتیجه ی تکه کد فوق :
See the Pen WmJxWz by alishooti (@alishooti) on CodePen.
با توجه به این موضوع که عناصر انتزاعی مانند after:: داخل کدهای HTML نوشته نمی شوند. در حالت عادی نمیتوان آن ها را با استفاده از ابزار dev tools مرورگر مشاهده کرد. به هر حال +chrome 32 و Firebug برای Firefox اجازه مشاهده ی المان های انتزاعی را داخل DOM می دهند . با استفاده از Dev tools مرورگر Chrome به نتیجه ایی که در تصویر زیر مشاهده می کنید رسیده ایم.
همچنین، تصویر فوق گویای این مطلب است که after:: به صورت ” inline ” بعد از متن داخل گیومه در حال نمایش است.
یک شبه عنصر می تواند انواع مختلفی از محتوا را نمایش دهد . مثل تصاویر (مثال فوق) ، متن ها و همچنین یونیکد ها ( ” \201C ” ) . مثال های زیر مقادیر صحیح قابل اجرا در after:: را نمایش می دهند.
.element::after {
content: url(path/to/image.png); /* an image, for example, an icon */
}
.element::after {
content: "(To be continued...)"; /* a string */
}
.element::after {
content: "\201C"; /* also counts as a string. Escaping the unicode; renders it as a character */
}
مقادیر after:: میتواند از نوع شمارنده ها (counter) و همچنین خالی باشند. شمارنده ها عموما به شکل تابع ()counter یا ()counters در لیست ها استفاده می شوند . شما می توانید اطلاعات بیشتری راجع به استفاده از شمارنده یا counter برای لیست ها در CSS کسب کنید.
شبه عناصر خالی همچنین می توانند برای از بین بردن حالت شناوری ( float ) استفاده شوند . برای مثال، از بین بردن float نوشته شده توسط Nicolas Gallagher از after:: و before:: برای از بین بردن حالت شناوری (clearfix) داخل المان هایی که از float استفاده شده را مطالعه کنید.
شبه عنصر after:: مثل تمام المان های دیگر قابل استایل دهی می باشد. خصوصیاتی همیچون ” float ” ، ” position ” و همینطور aniomation که البته این مورد در تمام مرورگرها قابل اجرا نیست که می بایست این مطلب را در انتهای همین مقاله بررسی کنید.
قابلیت استایل دهی به عناصر انتزاعی همچون سایر المان های یک صفحه باعث می شود که از آنها بیشتر برای اهداف طراحی استفاده شود. شبه عنصر after:: کاربرد فراوانی برای تولید اشکال هندسی با CSS دارد. کابرد مشهود این شبه عنصر در مثال زیر چشم گیر است. ستاره ی هشت پری رو با استفاده از یک المان و شبه عنصر after:: آن ایجاد کردیم. چهار پر اول رو با ساختن یک مربع ایجاد می کنیم و چهار پر دیگر را با استفاده از after:: همین المان.
/*
The element and its pseudo-element are both made translucent using the `opacity` property in order to better visualize how the two are positioned in the demo.
By removing the opacity values, you can see a fully opaque eight-point star
*/
.element {
width: 250px;
height: 250px;
background-color: #009966;
opacity: .8;
position: relative;
margin: 100px auto;
}
.element:after {
content: "";
position: absolute;
display: block;
width: 250px;
height: 250px;
background-color: #009966;
opacity: .8;
transform: rotateZ(45deg);
}
چون صرفا به منظور طراحی از after:: استفاده کردیم ، میتوانیم مقدار ” Content ” را خالی بگذاریم.
See the Pen ستاره با CSS by alishooti (@alishooti) on CodePen.
توجه داشته باشید که همین ستاره را با before:: نیز می توان ایجاد کرد.
تفاوت بین after: و after::
حتما راحت ترید که از یک “دو نقطه” به جای دو “دونقطه” استفاده کنید. در CSS1 و CSS2 برای شبه عناصر از یک”دونقطه” استفاده می شد(شبیه به کلاس های انتزاعی pseudo-classes مانند hover: ) . در CSS3 برای ایجاد تفاوت شبه عناصر از شبه کلاس ها ، از دو “دونقطه” برای شبه عناصر استفاد شد. تمام مرورگر هایی که ورژن قبلی را ساپورت میکنند ، ورژن جدید (after::) را نیز ساپورت می کنند(به جز حضرت Internet Explorer 8 😉 ).
در تمام دمو های استفاده شده در این بخش از after: استفاده کردیم برای پوشش دادن همه ی مرور گرها.
/* old CSS2 syntax */
.element:after {
/* content and styles here */
}
/* new CSS3 syntax */
.element::after {
/* content and styles here */
}
میزان دسترسی
محتوایی که توسط عناصر انتزاعی ایجاد می شوند ، داخل DOM نیستند( فقط قابل رویت هستند ). از این رو توسط Screen Reader ها (عموما برای افراد روشن دل) خوانایی ندارن . پس اکیدا توصیه میشود اطلاعات مهم (مثل متنی که برای فوتر در نظر گرفته شده است) را از طریق شبه عناصر ایجاد نکنید.
همانطور که اشاره شد برای اهداف طراحی استفاده می شوند . و نباید برای تکمیل یک جمله یا متن از آن استفاده شود . در غیر این صورت برای موتور های جست و جو ( SEO ) ادامه ی متن مورد نظر قابل فهم نیست.
و نکته ی مهم دیگر در این زمینه این است که با توجه به این که عناصر انتزاعی داخل DOM وجود خارجی ندارند، قابل استفاده با جاوا اسکریپت نیز نیستند.
موارد استفاده و مثال ها
عناصر انتزاعی ، همچنین after:: ، در بسیاری از موارد کاربرد دارند. در بخش زیر مثال هایی از این دست را معرفی خواهیم کرد.
استفاده از after:: برای پرینت لینک ها روی کاغذ
یکی دیگر از کاربرد های مهم این شبه عنصر ، زمانی است که شما صفحه ای از وب را پرینت می کنید. مسلم است که روی کاغذ هیچ لینکی قابل کلیک کردن نیست ، اما برای این که به خوانندگان این متون این موضوع را اطلاع دهید، می توانید لینک ارجاع را بعد از متن لینک چاپ کنید .
@media print {
a[href]::after {
content: " (" attr(href) ")";
}
}
تکه کد فوق دارای مفاهیم دیگری از CSS نیز می باشد. یک attribute selector ، خصوصویت content و تابع ()attr .
- attribute selector فوق تمام لینک های داخل صفحه که دارای صفت ” href ” می باشند را انتخاب می کند.
- after:: به مرورگر می گوید لینک ارجاع لینک های داخل صفحه را به عنوان خصوصیت ” content ” بعد از متن لینک ها چاپ کند.
- تابع ()attr ،مقدار صفت مشخصی (در اینجا href بعنوان ورودی) هر المانی که توسط selector انتخاب شده باشد را بر میگرداند.
- media@ که جزو خانواده ی rule ها یا قوانین است ، استایل های مربوط به حالت خاصی از مدیا (در این مورد پرینت) را در بر می گیرد.
دموی زیر نتیجه ی تکه کد های فوق است. البته این کار را برای حالت عادی و نمایش مرورگر انجام دادیم. شما میتوانید حالت پرینت روی کاغذ را خودتان تست کنید.
See the Pen استفاده از ::after برای پرینت لینک ها بعد از متن لینک by alishooti (@alishooti) on CodePen.
ساپورت مرورگر
after: با یک”دونقطه” در کروم ،فایرفاکس ،سافاری ،اپرا ،اینترنت اکسپلورر +8 و اندروید وآی او اس ، ساپورت می شود.
after:: با دو”دونقطه” در تمام مرورگر های فوق ساپورت می شود و از اینترنت اکسپلورر 9 به بالا.
انیمیت کردن شبه عناصر توسط کروم +26 ، فایرفاکس +4 ، سافاری +6.1 ، اپرا (post Blink) و اینترنت اکسپلورر +10 ساپورت می شوند.
یادداشت
اینترنت اکسپلورر z-index رو برای شبه عناصر ساپورت نمی کند.
استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .
همچنین منتظر دیدگاه های شما هستیم.