CODEWITHSUNDEEP
css
margherita pizza
margherita pizza

Reputation: 7145

CSS pseudo elements how to change the color

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: "*";
}

Upvotes: 3

Views: 7640

Answers (5)

Hariom Singh
Hariom Singh

Reputation: 1540

You can use below CSS style 

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

Upvotes: 6

Ambuj Khanna
Ambuj Khanna

Reputation: 1219

you can simply add color property in your css class. Try below snippets

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

OR

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

OR

.required label::after {
content: '*';
color:rgb(255,0,0);
}

Upvotes: 1

Ravi kant
Ravi kant

Reputation: 89

This might work for you perfectly

.required label::after {
   content: '*';
   width: 10px;
   color: blue;
}

Do provide width.

Upvotes: 3

Abin Thaha
Abin Thaha

Reputation: 4633

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>

Upvotes: 4

Nisarg Shah
Nisarg Shah

Reputation: 14541

Like any other element, you can add a color property to it.

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

Here's an example: 

.required label::after {
  content: "*";
  color: red;
}
<div class="required">
  <label>Some text</label>
</div>

Upvotes: 4

Related Questions