i want to control CSS of .cylinder::after dynamically in html, how to do this?

Question

i am having sass file with below content

.cylinder::after content: '' display: inline-block width: 75px height: 11.5px background: blue border: 1px solid #000000 border-radius: 50% position: absolute left: -1px bottom: -7.5px z-index: 0

so here background color is blue but i want it should be red when value is negative so have used below code

=0;then content else other_content">

            </div>

but I think [ngSyle.cylinder::after] is not correct syntax , so can anyone pls help.

Answer 1

You cannot control pseudo elements with Javascript.

What you can do however, is control the parent, and hydrate the child, like so :

.cylinder:after {
  color: red;
}

.cylinder.blue:after {
  color: blue;
}