how to change to color of pseudo-elements in css through jquery

Tags: jquery,css3

Problem :

I have made a heart button by css. here is the link from fiddle

#heart {
  height: 50px;
  width: 50px;
  position: relative;
#heart .outline:before,
#heart .outline:after {
  position: absolute;
  content: "";
  left: 28px;
  top: 1px;
  width: 15px;
  height: 27px;
  background: #d53423;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 85px 60px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
#heart .outline:after {
  left: 13px;
  -webkit-transform: rotate(45deg);
  border-radius: 45px 60px 0 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
function(e) {
  console.log('click heart support');
  $('#heart .outline:before').css('background', 'grey');
<form id="heart">
  <button id="like_btn" class="outline" type="submit"></button>

when I click the button, I want this heart-shaped button to change its color, but since this heart button is made from CSS pseudo-elements. I can't easily change the color as expected.

How can manipulate the pseudo-elements using jQuery (e.g. :before and :after), any one has a clue

Solution :

I set :before :after background color inherit, then change the background color of their parent.

.outline {
    background: red;
#heart .outline:before, #heart .outline:after {
    background: inherit;

    CSS Howto..

    How can I apply an external CSS class to a span created with dojo.create?

    How do I disable warnings from Aspx files (HTML,CSS)

    How to use cookies to change css ?

    Chrome & Firefox not rendering bold font-weights of Avenir, but Safari does! How to fix?

    How to attach stylesheet to HTML email?

    How div automatically adjust their size and positions the element inside it

    How to insert a div below dynamic divs row after onclick

    How to animate a progress bar in Bootstrap 4?

    How to dynamically change the color of the selected menu item of a web page?

    How to override GWT obfuscated style for DataGrid header

    How to avoid name collisions of css class names

    How to attribute different ids to child elements depending on the number of parent-like elements in that container

    CSS: How to get position and size relative to screen width?

    While scrolling, The current div goes up, and another div under it (under the first div background) shows

    How to reset tag in CSS

    JS/JQuery: How to switch class several times in a loop way?

    How to adjust width of a child element without adjusting the width of the parent in CSS?

    How to make a div and its children to ignore its parent styles?

    How to remove whitespace that appears after relative positioning an element with CSS

    How to add text under every image?

    How do I center bootstrap's carousel? Not the images, the carousel itself

    How can a user add content to a website? [closed]

    How to make images autoscale regardless of height (like on tumblr blogs)

    How to change font of select list items in the drop down

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    How to make a CSS scroll follow div stop follow at a position

    How to ensure both scale and slide up can occur for dynamic text using css and js?

    How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?

    How to position my embedded flash file

    ASP.Net MVC: How to use razor variable in CSS file