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

0 vote328 views1 answer
Ul change position when restore down
CSS
9 votes345 views3 answers
Bootstrap badge color
CSS
2 votes348 views2 answers
Css rotate 180 degrees
CSS
3 votes402 views2 answers
DevTools failed to load SourceMap: Could not load content for bootstrap.min.css.map
CSS Bootstrap
2 votes354 views2 answers
Nunito font
CSS
17 votes337 views1 answer
AppData\Roaming\npm\react-native.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
CSS
0 vote437 views1 answer
Bootstrap progress bar animation not working
CSS Bootstrap
7 votes339 views1 answer
How many fonts can i add in a css font-face
CSS
19 votes357 views6 answers
Css font family
CSS
145 votes417 views6 answers
Import bootstrap in react
CSS