三行代码  ›  专栏  ›  技术社区  ›  Nymrinae

动态更新类的伪元素属性

  •  0
  • Nymrinae  · 技术社区  · 1 月前

    attr() 对于内容,但似乎我不想更新背景色,我该怎么做?

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

    谢谢

    1 回复  |  直到 1 月前
        1
  •  1
  •   skara9    1 月前

    您可以在css中使用属性选择器:

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