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