Notation ::after css, not work in directive of Angular 5 - css

Question

I need is an asterisk in the required fields
I have this code
.required label::after {
content: '*';
color: red;
}
in my html
<div class="required" >
<label for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
This works well.
but I want to put it in a directive.
this is my directive
#Directive({
selector: '[lambRequired]',
host: {
'[style.after.content]': '"*"',
'[style.after.color]': '"red"',
},
})
export class RequiredDirective {
constructor() {
}
}
and in my html
<div >
<label lambRequired for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
but this does not work anymore
help me I will be grateful.
Thank you

Answer 1

You cannot do this by using this approach since pseudo elements are not actually part of the DOM tree. As a consequence of that they are not exposed in any manner on the DOM API.
For you to be able to work with pseudo elements you would need to use a class / css like you were doing before.
But unless you were planning to have more functionality on the directive don’t see what kind of gain you would have to create a directive that would just change the color of the text and append an asterisk without any actual logic or event monitoring. A css class would be way more efficient for such a simple goal.