Update pseudo-element property of a class dynamically-CodePudding

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

CodePudding user response：

You could use attribute selectors in css:

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

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