Update pseudo-element property of a class dynamically

Question

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

skara9 · Accepted Answer · 2021-11-29 22:28:04Z

3

You could use attribute selectors in css:

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

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

answered Nov 29, 2021 at 22:28

skara9

4,2041 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Update pseudo-element property of a class dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related