after::

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

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


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


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

after

 

از طریق 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 { } قرار دادیم این اتفاق فقط در چاپ صفحه می افتد.

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

css link print style

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

دموی زیر کاربردی دیگر از 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:: پشتیبانی نمی کند.

 

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

 

10 دیدگاه برای “after::

  1. چجوری این
    a[href]::after {
    content: “(” attr(href) “) “;
    }

    مگه ما توی css متغییر ها رو داریم که مقدار href رو درون خودش ذخیره کنه و بعد اونجا نمایش بده !!!! بعدش این محتوای content چجوری کانکت میشه؟

  2. سلام من کد زیر رو نوشتم:
    .my-test-box {
    width:100px;
    height:30px;
    border-radius:3px;
    background: #313131;
    }
    .my-test-box::after {
    width:0;
    height:0;
    border-right:6px solid transparent;
    border-left:6px solid transparent;
    border-top:9px solid #435C7E;
    content:””;
    margin:0 auto;
    }

    اینم که توی body هت :

    میخوام یه باکس باشه که اون فلشه زیرش باشه ولی نمیدونم چرا نمیشه لطف میکنید راهنمایی کنید میکل چیه؟؟

  3. سلام

    ساخت منوی dropdown با استفاده از after,before امکان پذیره؟
    منظورم این هست که بدون display:block باشه.
    یعنی زمانیکه روی عنوانهای ردیف اول هاور می کنیم زیرمنو با after ظاهر بشه، چنین چیزی امکان پذیره؟

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

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