عنصر مخفی ::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