Estoy agregando una cinta a una tarjeta y quiero mostrar dinámicamente el contenido y el color según los accesorios. Lo hice con éxito con attr() para el contenido, pero parece que estoy atascado para actualizar el color de fondo, ¿cómo puedo hacerlo?

HTML:

 <span class="ribbon zindex-2" :data-content="content" />

SCSS:

 .ribbon { position: absolute; width: 100px; height: 100px; top: 0px; left: 15px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .ribbon::before { content: attr(data-content); position: absolute; width: 150%; height: 28px; background: red; /* value to update dynamically but I don't know how */ transform: rotate(-45deg) translateY(-20px); display: flex; justify-content: center; align-items: center; text-transform: uppercase; font-weight: 600; color: #fff; letter-spacing: 0.1em; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }

La variable de contenido proviene de un Vue Prop. Por ejemplo, quiero configurar este fondo en dorado si la variable de contenido es "1", gris si es "2" y así sucesivamente...

Gracias