📌 این ویژگی مربوط به مقدار محتوای pseudo-element‌ها مثل ::before و ::after است.
در Tailwind می‌توانیم از کلاس‌های content-* برای اضافه کردن متن یا خالی استفاده کنیم.

✅ کلاس‌ها

• content-['text'] → مقدار دلخواه به pseudo-element اضافه می‌کند

• content-[''] → اضافه کردن pseudo-element خالی

• content-none → حذف محتوا

✅ مثال

<p class="relative before:content-['★'] before:absolute before:left-0 before:text-yellow-500 mb-2">
  این متن با ستاره قبل از خود نمایش داده می‌شود.
</p>

<p class="relative after:content-['✔'] after:absolute after:right-0 after:text-green-500 mb-2">
  این متن با تیک بعد از خود نمایش داده می‌شود.
</p>

<p class="relative before:content-[''] mb-2">
  این متن با pseudo-element خالی
</p>

📌 نکات مهم

• برای استفاده از pseudo-element‌ها باید relative یا absolute بودن موقعیت رو کنترل کرد.

• می‌توان با responsive ترکیب کرد:

  • sm:before:content-['★'] md:after:content-['✔']