CSS pseudo elements how to change the color

Question

I'm not good at CSS. I'm a java script developer. I have found a code to add my project to add asterisk mark in the input fields. This is the code. Can anybody tell me how to make this asterisk mark color red.

.required label::after {
  content: "*";
}

Answer 1

You can use below CSS style

.required label::after {
  content: "*";
  color:#ff00ff;
}

Answer 2

You can just use the color to set the color of the pseudo element as well.

.required label:after {
  content: '*';
  color: #f00;
}

<div class='required'>
  <label>First Name :</label>
  <input type ='text' />
</div>