CSS ::after کا شمسی عنصر

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

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

استفاده کنید 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;
}

جزئیات فنی

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

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این پseudo-element پشتیبانی می‌کند.

صفحات مرتبط

تدریس:CSS 伪元素

مطالب:CSS ::before کا شمسی عنصر