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:: پشتیبانی نمی کند.
توجه: این عناصر واقعی نیستند پس از قرار دادن محتوایی که برایتان اهمیت دارد و ضروری است در این عناصر خودداری کنید. به عنوان مثال محتوایی که می خواهید موتورهای جستجو ببینند در این عناصر قرار ندهید.
چجوری این
a[href]::after {
content: “(” attr(href) “) “;
}
مگه ما توی css متغییر ها رو داریم که مقدار href رو درون خودش ذخیره کنه و بعد اونجا نمایش بده !!!! بعدش این محتوای content چجوری کانکت میشه؟
متغیر نیستند ویژگی اند, که از طریق تابع attr بهشون دسترسی داریم: http://css-tricks.ir/css_re…
سلام من کد زیر رو نوشتم:
.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 هت :
میخوام یه باکس باشه که اون فلشه زیرش باشه ولی نمیدونم چرا نمیشه لطف میکنید راهنمایی کنید میکل چیه؟؟
سلام. کدتون رو بزارید توی سایت jsbin.com بعد آدرسشو کپی کنید بزارید اینجا تا چک کنم. در ضمن من متوجه نشدم نتیجه باید چی باشه
ممنون
سلام
ساخت منوی dropdown با استفاده از after,before امکان پذیره؟
منظورم این هست که بدون display:block باشه.
یعنی زمانیکه روی عنوانهای ردیف اول هاور می کنیم زیرمنو با after ظاهر بشه، چنین چیزی امکان پذیره؟
سلام.
چون داخل زیر منو باید بتونید یک لیست قرار بدید نمیشه. چون نمیشه تگ html توی after قرار داد.
ممنون
سلام آیا حالتی وجود داره نتونیم از :: before و :: after استفاده کنیم؟
آره یک نوع از عناصر هستند که after before ندارند. مثل عنصر input و یک سری دیگه که بهشون Replaced element گفته میشه.
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
توی این مطلب هم در مورد این قضیه حرف زدیم:
http://css-tricks.ir/?p=3134
بسیار عالی توضیح دادید. سپاسگزارم