عنصر جعلی ::before CSS

تعریف و استفاده

CSS ::before عنصر جعلی برای ورود محتوایی در ابتدای محتوای علامت مشخص شده استفاده می‌شود.

استفاده از content ویژگی مشخص می‌کند که چه محتوایی باید وارد شود. مقدار content می‌تواند باشد:

• رشته: content: "Hello world!";
• تصویر: content: url(myimage.jpg);
• بدون محتوا: content: none;
• شمارنده: content: counter(li);
• قوس‌ها: content: open-quote;
• مقدار ویژگی: content: " (" attr(href) ")";

نکته:لطفاً توجه داشته باشید که محتوایی که وارد شده است همچنان در داخل علامت مشخص شده قرار دارد. محتوایی که وارد شده است به محتوای دیگری که در داخل علامت قرار دارد اضافه می‌شود.

استفاده از ::after محتوایی را در پس از محتوای علامت خاص قرار دهید.

مثال

مثال 1

یک رشته را در ابتدای محتوای هر علامت <p> قرار دهید:

p::before {
  content: "خواندن این: ";
}

آزمایش کنید

مثال 2

یک رشته را در ابتدای محتوای هر علامت <p> قرار دهید و سبک‌های ورودی را تنظیم کنید:

p::before {
  content: "خواندن این -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

آزمایش کنید

نحوه نوشتن CSS

::before {
  اظلاعات css;
}

جزئیات فنی

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این عنصر جعلی را به طور کامل پشتیبانی می‌کند.

صفحات مرتبط

تدریس:عنصر جعلی CSS

منبع:عنصر جعلی ::after CSS