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

17 votes378 views3 answers
Grid blocks center
CSS
0 vote386 views1 answer
Can i do an onclick menu with css alone
CSS
0 vote359 views1 answer
Change hover color link in wordpress
CSS
0 vote372 views1 answer
Css file not getting captured in laravel project
CSS
2 votes458 views2 answers
Bootstrap change color table striped
CSS Bootstrap
0 vote351 views2 answers
Nth-child(2n+1)
CSS
13 votes349 views3 answers
How to change cursor in css on hover
CSS
4 votes332 views2 answers
Css center vertically
CSS
0 vote367 views1 answer
Css disable user interaction
CSS
1 vote368 views2 answers
Brightness css
CSS