چگونه ایجاد می‌شود: جعبه نشان‌دهنده

آموزش نحوه استفاده از CSS برای ایجاد جعبه نشان‌دهنده.

جعبه نشان‌دهنده‌ها می‌توانند برای اضافه کردن اطلاعات اضافی به عناصر/محتوا استفاده شوند:

عنوان مثال جدید

عنوان مثال جدید

عنوان مثال جدید

عنوان مثال جدید

آزمایش کنید

چگونه جعبه نشان‌دهنده ایجاد می‌کنیم

مرحله اول - اضافه کردن HTML:

<span class="badge">جدید</span>

مرحله دوم - اضافه کردن CSS:

.badge {
  رنگ پس‌زمینه: قرمز;
  رنگ: سفید;
  padding: 4px 8px;
  text-align: center;
  border-radius: 5px;
}

آزمایش کنید