如何通过JQuery更改CSS中伪元素的颜色？

我用CSS制作了一个心形按钮。是我代码的JSFIDLE链接

#心脏{
高度：50px；
宽度：50px；
位置：相对位置；
}
#心。大纲：之前，
#心。轮廓：之后{
位置：绝对位置；
内容：“；
左：28px；
顶部：1px；
宽度：15px；
高度：27px；
背景#d53423；
-moz边界半径：50px 50px 0；
边界半径：85px 60px 0；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
-webkit转换来源：0 100%；
-moz变换原点：0 100%；
-ms变换原点：0.100%；
-o-变换原点：0.100%；
变换原点：0.100%；
}
#心。轮廓：之后{
左：13px；
-webkit变换：旋转（45度）；
边界半径：45px 60px 0；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
-ms变换原点：100%100%；
-o-变换原点：100%100%；
变换原点：100%100%；
}
$（“#心”）。在（'提交'），
职能（e）{
console.log（'click heart support'）；
e、 预防默认值（）；
$（'heart.outline:before'）.css（'background'，'grey'）；
}
);

这似乎适合我（Firefox 20）。。。没有在任何其他方面进行测试

#heart .outline:active:before,
#heart .outline:active:after {
    background: #000;
}

这里，
：active
是一个伪类，
：before
和
：after
是伪元素。因此，这是完全可以接受的根据

选择器中的任何位置都允许使用伪类，而伪元素只能附加在选择器的最后一个简单选择器之后

我将
:before
:before
背景色继承，然后更改其父项的背景色

另一个解决方案是在提交时更改表单的类，并使用修改后的选择器针对心脏病儿童的
：before
和
：after
虽然我确实喜欢N A T H使用
：activesxy的答案。只是对现有代码做了最小的更改

jquery
css
html

jQuery无法完成此操作-请参见添加类。无论如何，最好将所有样式都保留在CSS中。CSS部分显然有效，询问者的问题是在使用jQuery后更改颜色。。。哪个不起作用…：）在这种情况下，使用jQuery onlick为元素提供另一个类-然后以不同的方式设置它的样式。。。我会试着做一个JSFIDLE…谢谢，佩文，这就是我需要的
.outline {
    background: red;
}
#heart .outline:before, #heart .outline:after {
    background: inherit;
}

$("#heart:not(.submitted)").on('submit',function(e){
    console.log('click heart support');     
    e.preventDefault();
    $('#heart').addClass('submitted');
});

// ... removed lines 

#heart.submitted .outline:before,
#heart.submitted .outline:after{
    background: grey;
}

<form id="heart" >
    <button id="like_btn" class="outline" type="submit" ></button>
</form>