Dynamically fill css Pseudo-element 'before' content with Angular2

Question

I\'m having a hard time trying to dynamically fill the \'content\'-value on a :before pseudo-element. I\'ve found out it was possible on earlier versions of Angular

Answer 1

Use: <div class="test" [attr.data-before]="[name]">

UPDATE

You can also just drop the square brackets around name like this:

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

This appears to be the convention in a number of examples I see. This works, I think, because you are already telling Angular to perform binding by specifying the [attr.data-before], and it assumes the data on the right is coming from the corresponding component.

Answer 2

For me, the below one worked in Angular version 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;

}