after::

after:: یک pseudo-element است که به ما اجازه می دهد تا بدون هیچ تغییری در HTML محتوایی از طریق CSS در یک صفحه قرار دهیم.

after:: به عنوان یک فرزند مجازی در آخر یک عنصر HTML قرار می گیرد و محتوای آن به صورت پیشفرض در حالت inline نمایش داده می شود.

div::after {
  content: "محتوای مجازی";
}

<div>
  <!-- عناصر دیگر و محتواهای دیگر عنصر در اینجا قرار می گیرد -->
  محتوای مجازی
</div>

 

از طریق after:: تقریبا هر نوع محتوایی می توان وارد صفحه کرد. محتوا می تواند متن, کاراکتر و یا تصویر باشد. موارد قابل قبول در زیر نشان داده شده است:

.element::after {
  content: url(path/to/image.png); /* یک تصویر و یا آیکون */
}

.element::after {
  content: "( text and ... )"; /* رشته ای از حروف و... */
}

.element::after {
  content: "\201C"; /* کاراکترها */
}

 

فرض کنید می خواهیم به آخر تمام لینک های خارجی که در یک صفحه وجود دارند یک آیکون اضافه کنیم تا بیانگر خارجی بودن آن لینک باشد. از آنجایی که این آیکون از نظر محتوایی اهمیت ندارد و فقط جنبه ظاهری دارد می توان آن را از طریق after:: وارد صفحه کرد.

.external::after {
  content: url(external-link.png);
  padding-right: 5px; /* فاصله ای برای ظاهری بهتر */
}

نتیجه به صورت زیر خواهد بود:

 

See the Pen ::after by Mojtaba Seyedi (@seyedi) on CodePen.

 

توجه کنید که after:: از نظر مشخصه z-index به صورت پیشفرض بالاتر از دیگر فرزندان عنصری که after:: به آن اضافه شده است می باشد.

شاید تا الان در پروژه ای نیاز بوده است تا استایلی خاص برای زمان چاپ صفحه بر روی برگه فراهم کنید. می دانید که کافی است استایل های مورد نظر را در بلاک زیر قرار دهید تا مرورگر فقط آن ها را در زمان چاپ بر روی برگه اعمال کند:

@media print {
  /* استایل های مربوط به زمان پرینت */
}

واضح است که لینک ها بر روی برگه ارزشی نخواهند داشت و فقط یک متن ساده خواهند بود. یک کار زیرکانه که به کاربری که صفحه ای را چاپ می کند خیلی کمک می کند این است که آدرس تمام لینک ها را در جلوی متنشان داخل پرانتز بنویسیم. و راه حل ساده برای پیاده سازی این هدف استفاده از after:: ها در CSS است. در این صورت نیازی به هیچ تغییری در HTML نخواهد بود و شما همین الان با اضافه کردن چند خط به فایل CSS در پروژه هایتان قادر خواهید بود به این امر دست پیدا کنید, بدون هیچ نگرانی در مورد محتوای فایل های HTML و غیره در پروژه. کافی است به صورت زیر عمل کنید:

@media print {
  a[href]::after {
    content: "(" attr(href) ") ";
  }
}

لطفا به قرار دادن فاصله ها بین گیومه ها و پرانتز ها دقت کنید تا ظاهر بهتری در چیدمان بوجود بیاید.

اتفاقی که در اینجا می افتد به این قرار است که تمام تگ های <a> که دارای ویژگی href هستند انتخاب شده و محتوای href که آدرس لینک است در درون after:: ریخته می شود و به آخر عنوان هر لینک در درون پرانتز اضافه می شود.

توجه داشته باشید از آنجا که ما این استایل ها را درون @media print { } قرار دادیم این اتفاق فقط در چاپ صفحه می افتد.

نتیجه کد بالا در زمان چاپ بر روی برگه به صورت زیر خواهد بود:

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

دموی زیر کاربردی دیگر از after:: را نشان می دهد:

 

See the Pen ::after usage by Mojtaba Seyedi (@seyedi) on CodePen.

 

پشتیبانی مرورگرها

همه مرورگرها و +IE 8 و iOS و اندروید after: را پشتیانی می کند.

: یا ::؟

همه مرورگرها هر دو روش نوشتن را پشتیبانی می کنند اما IE8 فقط (:) را پشتیبانی می کند پس بهترین روش برای نوشتن در حال حاضر به قرار زیر است.

div:after
{
  content: 'Hoy!';
}

توجه داشته باشید که استفاده از :: استاندارد امروزه می باشد.

نکته دیگر اینکه IE استفاده از z-index را بر روی after:: پشتیبانی نمی کند.

 

توجه: این عناصر واقعی نیستند پس از قرار دادن محتوایی که برایتان اهمیت دارد و ضروری است در این عناصر خودداری کنید. به عنوان مثال محتوایی که می خواهید موتورهای جستجو ببینند در این عناصر قرار ندهید.