درود

ویژگی before و after بیشتر برای تغییر حالت یک المان و یا محتوا استفاده میشوند و به خاطر همین از کانتنت استفاده میشه. در اصل ما با اضافه کردن before به یک کلاس، میگیم که محتوایی که قرار هست قبل از اون کلاس بیاد چی باشه و این محتوا رو با کانتنت نشون میدیم. مثال زیر رو ببینید:

<span class="ribbon">Notice where the orange box is.span>
.ribbon {
  background-color: #5bc8f7;
}
.ribbon::before {
  content: "Look at this orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

براساس توضیحاتی که دادم، در اینجا خروجی ما میشه: Look at this orange box.Notice where the orange box is.

در این صفحه میتونید مثالهای بیشتری از before ببینید تا قلقش دستتون بیاد.