css - 使用 angular 2 动态编辑伪元素

Question

我正在尝试在 angular 2 元素中动态编辑那种 css 属性，但没有成功:(

 progress::-moz-progress-bar {
            background: #278ce2;
        }

我想在同一个页面上添加 n 个进度条。背景颜色由用户选择并动态切换。我们的想法是为每个像这样创建的栏添加一个 css 属性:

 classname::-moz-progress-bar {
        background: color;
    }
 classname::-webkit-progress-value {
        background: color;
    }
 classname[aria-valuenow]:before {
        background: color;
    }

因为我希望能够根据用户的需要创建尽可能多的条，所以我之前无法命名这些类。

有没有人知道如何做到这一点？如果您需要更多详细信息，请问我。

Answer 1

无法找出如何编辑那些伪元素。但我设法通过用 div 重新创建进度条来做我想做的事。这是可以帮助某人的代码:

在 HTML 中(使用 Angular 2)

<div class="probar">
  <div class="inside-probar" [ngStyle]="{background:color, width: ((value * 100)/max) + '%'}">
    {{value}}/{{max}}
  </div>
</div>

在 CSS 中

.probar{
  height: 20px;
  width: 140px;
  border-radius: 5px;
  background: #ccc;
  padding: 3px;
}

.inside-probar{
  text-align: center;
  height: 20px;
  width: 100%;
  max-width: 100%;
  border-radius: 5px;
  margin-left: 0px;
  color: black;
}