Change svg color in pseudo element

p:after {
  width: 48px;
  height: 48px;
  display: inline-block;
  content: '';
  -webkit-mask: url(https://gist.githubusercontent.com/mmathys/fbbfbc171233a30e478ad5b87ec4f5d8/raw/cd9219e336b8f3b85579015bdce9665def091bb8/heart.svg) no-repeat 50% 50%;
  mask: url(https://gist.githubusercontent.com/mmathys/fbbfbc171233a30e478ad5b87ec4f5d8/raw/cd9219e336b8f3b85579015bdce9665def091bb8/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.red:after {
  background-color: red;
}

.green:after {
  background-color: green;
}

.blue:after {
  background-color: blue;
}

Source: stackoverflow.com

Similar codes

7 votes410 views3 answers
Embed google font css
CSS
2 votes420 views1 answer
Onclick javascript are you sure
CSS
1 vote393 views1 answer
Css don't break elements
CSS
5 votes393 views2 answers
Make background overlay css
CSS
0 vote363 views1 answer
Make td match display flex
CSS
3 votes390 views1 answer
Css how to make text not break
CSS
3 votes378 views1 answer
How to change the page background in css
CSS
4 votes352 views4 answers
Change placeholder color
CSS
-2 votes372 views2 answers
Text sliding css
CSS
5 votes351 views3 answers
How to get rid of button outline when clicked
CSS