خوش آمدید

 

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";
}

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

 

 

توجه کنید که 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:: را نشان می دهد:

 

 

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

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

: یا ::؟

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

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

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

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

 

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