before::

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

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


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


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

before in devtools

 

از طریق 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::

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

 

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

 

2 دیدگاه برای “before::

  1. سلام مثلا اگر بخواییم کاراکترمون یکی از آیکونهای کتابخانه
    ی font awesome باشه چطوری باید کاراکترش رو پیدا کنیم ؟ جلوی هرکدوم یک کاراکتر گذاشته اما وقتی میزارم کل محتوارو میزاره؟؟؟؟

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