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

1 vote169 views1 answer
Style direction
CSS
29 votes171 views6 answers
Background size in css
CSS
7 votes219 views1 answer
Css remove blue outline button
CSS
54 votes175 views2 answers
How to center an image element inside a block in css
CSS
0 vote175 views1 answer
Center text html css position fixed
CSS
0 vote197 views1 answer
What is the opacity of disabled text
CSS
2 votes176 views1 answer
Vertically center an svg
CSS
5 votes198 views1 answer
Disregard incoming git pull and return to last commit
CSS
60 votes168 views5 answers
Rotate div css
CSS
0 vote173 views2 answers
Bootstrap 4 scss angular 8
CSS