Question

我很难尝试在:before伪元素上动态填充内容＆＃39; -value。我已经发现在早期版本的AngularJS上可以在here的另一个问题中通过在其上具有before - 伪元素的元素上创建额外的数据属性，然后使用CSS中的attr()读取该值。

使用普通字符串作为值时似乎工作得很好：

// CSS
.test:before {
  content: attr(data-before);
}

// Template
<div class="test" data-before="before text goes here">
  <h2>Hello {{name}}</h2>
</div>

但是当我尝试用这样的插值填充数据时，我得到一个错误：

// CSS
.test:before {
  content: attr(data-before);
}

// Template
<div class="test" data-before="{{name}}">
  <h2>Hello {{name}}</h2>
</div>

我在这里缺少什么？生成的错误是：

Error: Template parse errors:
Can't bind to 'before' since it isn't a known property of 'div'.

以下是plunker中的非工作版本：http://plnkr.co/edit/HwVp9jlsx6uKfoRduxWu

Answer 1

使用：<div class="test" [attr.data-before]="[name]">

<强>更新

您也可以将方括号放在name左右，如下所示：

<div ... [attr.data-before]="name">。

这似乎是我看到的一些例子中的惯例。我认为这是有效的，因为你已经告诉Angular通过指定[attr.data-before]来执行绑定，并且假设右边的数据来自相应的组件。

Answer 2

对我来说，以下代码适用于Angular版本8。

HTML：

<div style="display: block" class="testcl" [attr.data-before-content]="dynamicContent"></div>

CSS：

.testcl::before{
/* content: "56%"; */
content: attr(data-before-content);
position: absolute;
left: 46%;
top: 50%;
font-weight: 700;
font-size: 24px;
color: #55b358;

}

动态填充css伪元素＆＃39;之前＆＃39; Angular2的内容

2 个答案: