Как я могу отдать псевдо-элементу имя изображения и применить его?

Question

[alaskafx]

Есть такой код:

<div class="card" v-for="(card, index) in offers" :key="index">
            <div class="cwrap">
              <img :src="require(`@/assets/${card.title}.svg`)" alt="" />
              <b>{{ card.title }}</b>
              <p>{{ card.description }}</p>
            </div>
          </div>

и такие стили(псевдоэлемента):

&::before {
    position: absolute;
    content: "";
    background-image: ; // как передать?
    width: 100%;
    height: 100%;
  }

Как я могу передать в css имя изображения и сделать в итоге что-то вроде такового:
../assets/Имя.svg ?

Comments

[Ankhena]

Думаю, что проще всего через кастомные свойства css и :style. Правда, задавать нужно родителю.

[alaskafx]

Ankhena, Можете привести пример в виде кода?

[Ankhena]

alaskafx, типа того

<div class="block" :style="{ '--bg': 'red'}">block</div>

.block::before {
  content: "text ";
  background: var(--bg);
}