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

For me, the below one worked in Angular version 8.

HTML:

CSS:

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

}