before:: یک pseudo-element است که به ما اجازه می دهد تا بدون هیچ تغییری در HTML محتوایی از طریق CSS در یک صفحه قرار دهیم.
before:: به عنوان یک فرزند مجازی در اول یک عنصر HTML قرار می گیرد و محتوای آن به صورت پیشفرض در حالت inline نمایش داده می شود.
div::before {
content: "محتوای مجازی";
}
<div>
محتوای مجازی
<!-- عناصر دیگر و محتواهای دیگر عنصر در اینجا قرار می گیرد -->
</div>
از طریق before:: تقریبا هر نوع محتوایی می توان وارد صفحه کرد. محتوا می تواند متن, کاراکتر و یا تصویر باشد. موارد قابل قبول در زیر نشان داده شده است:
.element::before{
content: url(path/to/image.png); /* یک تصویر و یا آیکون */
}
.element::before{
content: "( text and ... )"; /* رشته ای از حروف و... */
}
.element::before{
content: "\201C"; /* کاراکترها */
}
فرض کنید می خواهیم به اول یک نقل قول علامت شروع نقل قول اضافه کنیم تا برای کاربر واضح باشد که این عبارت یک نقل قول است. از آنجایی که این علامت از نظر محتوایی اهمیت ندارد و فقط جنبه ظاهری دارد می توان آن را از طریق before:: وارد صفحه کرد.
blockquote::before {
content: "\201D";
}
نتیجه با کمی استایل دهی به صورت زیر خواهد بود:
See the Pen ::before by Mojtaba Seyedi (@seyedi) on CodePen.
توجه کنید که before:: از نظر مشخصه z-index به صورت پیشفرض پایین تر از دیگر فرزندان عنصری که before:: به آن اضافه شده است می باشد.
به عنوان کاربردی دیگر فرض کنید می خواهیم تمام پاراگراف هایی که نیاز به توجه بیشتری دارند را با پیشوند قرمز رنگ ” نکته: ” شروع کنیم, کافی است در HTML یک کلاس .note به پاراگراف اضافه کنیم:
<p class="note">
پاراگراف مورد نظر...
</p>
و در CSS هم خواهیم داشت:
p.note {
font-style: italic;
color: grey;
}
p.note::before {
content: "نکته: ";
color: red;
}
نتیجه را در تصویر زیر می بینید:
دموی زیر کاربردهای دیگری از before:: را نشان می دهد:
See the Pen ::before demo by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگرها
همه مرورگرها و +IE 8 و iOS و اندروید before: را پشتیانی می کند.
: یا ::؟
همه مرورگرها هر دو روش نوشتن را پشتیبانی می کنند اما IE8 فقط (:) را پشتیبانی می کند پس بهترین روش برای نوشتن در حال حاضر به قرار زیر است.
div:before
{
content: 'Hoy!';
}
توجه داشته باشید که استفاده از :: استاندارد امروزه می باشد.
نکته دیگر اینکه IE استفاده از z-index را بر روی before:: پشتیبانی نمی کند.
توجه: این عناصر واقعی نیستند پس از قرار دادن محتوایی که برایتان اهمیت دارد و ضروری است در این عناصر خودداری کنید. به عنوان مثال محتوایی که می خواهید موتورهای جستجو ببینند در این عناصر قرار ندهید.
سلام مثلا اگر بخواییم کاراکترمون یکی از آیکونهای کتابخانه
ی font awesome باشه چطوری باید کاراکترش رو پیدا کنیم ؟ جلوی هرکدوم یک کاراکتر گذاشته اما وقتی میزارم کل محتوارو میزاره؟؟؟؟
توی ساده ترین حالت لینک font-awesome رو توی head وارد کنید و مثل این دمو می تونید عمل کنید.
https://jsbin.com/zawoqo/2/…
اگر دوست دارید می تونید خودتون font-awesome رو با دستور font-face توی css خودتون معرفی کنید
مقدار content کاراکتر مورد نظر رو در content خودتون جایگزین کنید البته قبلا باید font-faceرو تعریف کرده باشین
سلام
برای پس زمینه عنوان چطوری میشه اون رو به کار برد که یه عکس پس زمینه عنوان با طول های مختلف باشه و یه عکس دیگه به عنوان ادامه عکس قبلی و انتهای عکس باشه
مثلا فکر کنید همین دکمه ارسال تا کلمه ارسال یه پس زمینه باشه و بقیه اش یه پس زمینه دیگه
ممنون میشم راهنماییم کنید
سلام اقای سیدی
میشه یه توضیح درباره این &: قبل :before بگید ؟
خیلی از کد ها این شکلی هستن
https://codepen.io/giana/pen/yYBpVY
این کلمه &: جایگذین نداره ؟
نمیشه با یک کد دیگه نوشت این علامت را ؟
راستی این نقطه هایی که داخل html میزارن چه نقشی داره
میشه با div نوشتشون ؟؟؟
https://codepen.io/vinnyA3/pen/jrKWoG
سلام
دو سوالی که مطرح کردید مربوط به HTML و CSS نیستند، بلکه مربوط به پیش پردازنده های اونان. که کار پیش پردازنده ساده سازی نوشتن HTML و CSS هستش.
دو پیش پردازنده ای که به سوالتون مربوط میشه، Sass و Pug هستند.
توی اینترنت در موردشون مطلب بخونید، سوالاتی که پرسیدید هم حل میشه براتون
موفق باشید.
سلام تفاوت before و after چیه؟
سلام
اگر به تگ div ای در سی اس اس before بدیم چیزی که در content:””; بهش میدیم اولین عنصر داخل div خواهد شد و اگر after بدیم چیزی که در content:””; بهش میدیم آخرین عنصر داخل div خواهد شد و تنها تفاوت همینه.
سلام خیلی ممنون از سایت خوبتون
بنده به مشکلی خوردم که تو انجمن ها هم مطرح کردم اما پاسخی نگرفتم.
میخواستم بدونم چرا من از کدهای فونت awesome در سی اس اس سایتم به شکل after یا before استفاده میکنم نمایش داده نمیشن به طور مثال:
content:”\f123″;
در اچ تی ام ال از این کدهای زیر استفاده میکنم نمایش داده میشن اما در سی اس اس از اون کدهای کوتاه استفاده میکنم نمایش داده نمیشن دلیلش چی هستش ممنون میشم راهنماییم کنیم.
سلام، این کد رو ببینید شاید کمکتون کنه:
https://jsbin.com/wejureb/edit?html,css,output
اگر دمو که مشکلتون رو نشون میده اینجا لینک بدید تا چک کنیم، موفق باشید.
چقدر عالی توضیح دادید من 6 ماه کلاس رفتم ولی الان تازه مفهوم before را متوجه شدم.
سلام من این قسمت رو خوب متوجه نشدم . یعنی چی؟
« توجه کنید که before:: از نظر مشخصه z-index به صورت پیشفرض پایین تر از دیگر فرزندان عنصری که before:: به آن اضافه شده است می باشد. »
سلام، یعنی فرض کنید before رو برای عنصری به اسم div انتخاب کردید. این جمله میگه:
– z-index شبه عنصر before کمتر از بچه های عنصر div خواهد بود.
– یعنی before زیر بچه های div نمایش داده میشه.
اها ، یعنی اگر به یک تگ before بدیم نسب به فرزندان اون تگ پایین ترین قسمت قرار میگیره و اگر after بدیم مقدار after بالاترین قسمت قرار می گیره نسبت به فرزندان اون تگ ؟
نه، هم افتر و هم بیفر زیر قرار میگیرن، یک دمو درست کنید اینطور موقع ها و یکم تست کنید راحت به جوابتون میرسید:
مثال:
https://jsbin.com/ripidur/edit?html,css,output
سلام
ببخشید میشه بگید چطور در before:: و icon ::after بزاریم؟؟؟؟؟
سلام.
خیلی ممنون بابت محتوای ارزشمندتون.
سوالی داشتم.
برا پروژه ای، یه استایل شیت main.css دارم، تو اون، جلو content، بجای کد و کرکتر و…، عکس میاره!
اصلا هم نمیفهمم اون عکسو چجوری گذاشته اونجا!
کد:
.o-icon–close:before {
content: “”;
}
اگه اجخ وجخ دیده میشه، اینم ویرایش دیگشه:
} o-icon–close:before.
; “content: “
}
اون علامت مستطیل، همون عکس آیکنه که اینجا خب نشون نمیده.