Как добавить разный фон в ::before для объектов с одинаковым стилем?

Чтобы добавить разные фоны в псевдоэлемент ::before для объектов с одинаковым стилем, можно воспользоваться атрибутом "content" и псевдоэлементами CSS.

Прежде всего, нужно добавить псевдоэлемент ::before к объектам, которым нужно задать разный фон. Например, у нас есть два объекта с одинаковым стилем, и мы хотим задать разные фоны для их псевдоэлементов ::before.

HTML:

<div class="object"></div>
<div class="object"></div>

CSS:

.object {
  width: 100px;
  height: 100px;
  position: relative;
}

.object::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.object:nth-child(1)::before {
  background: url('background1.jpg') center center no-repeat;
}

.object:nth-child(2)::before {
  background: url('background2.jpg') center center no-repeat;
}

В данном примере мы используем директиву nth-child() для выбора конкретного объекта и задания фона для его псевдоэлемента ::before. Таким образом, мы можем задать разные фоны для каждого объекта, не изменяя стили самих объектов.

Не забудьте заменить 'background1.jpg' и 'background2.jpg' на пути к вашим изображениям.