CSS ::after کا شفاف علامت

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

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

جزئیات فنی

نسخه: CSS2

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

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

کروم ایج فایرفاکس سافری آپرا
4.0 9.0 3.5 3.1 7.0

صفحات مرتبط

درس:CSS ڈرائیور

مطالب:CSS ::before کا شفاف علامت