Update pseudo-element property of a class dynamically

I’m adding a ribbon to a card and I want to display dynamically the content and the color based on props. I successfully did it with attr() for the content, but it seems I’m stucked to update the background-color, how can I do it?

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);
}

The content variable is coming from a Vue Prop. For example, I want to set this background to gold if the content variable is "1", gray if it’s "2" and so on…

Thanks

>Solution :

You could use attribute selectors in css:

.ribbon[data-content="1"]::before {
  background: gold;
}

.ribbon[data-content="2"]::before {
  background: gray;
}