عنصر شبه ::after CSS

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

CSS ::after عناصر تقلیدی برای اضافه کردن محتوایی در پس از محتوای علامت مشخص شده استفاده می‌شوند.

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

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

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

استفاده از ::before محتوایی را در پیش از محتوای عناصر خاص قرار دهید.

مثال

مثال 1

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

p::after {
  content: " - به خاطر بسپارید";
}

آزمایش کنید:

مثال 2

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

p::after {
  content: " - به خاطر بسپارید";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

آزمایش کنید:

نحوه نوشتن CSS

::after {
  اظهارات css;
}

جزئیات فنی

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

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

صفحات مرتبط

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

منابع:عنصر شبه ::before CSS