Dynamically fill css Pseudo-element 'before' content with Angular2
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.
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;
}